微信小程序--二维码窗口
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序--二维码窗口相关的知识,希望对你有一定的参考价值。
微信小程序二维码窗口:
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> <!--content--> <!--使用animation属性指定需要执行的动画--> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> <!--drawer content--> <view class="drawer_content"> <view class="contant-poup"> <view class="poup-box clearfix"> <view class="img-poup"><image src="../../images/user.jpg"></image></view> <view class="text-box"> <view class="text-poup">Cindy</view> <view class="position-poup">广东 深圳</view> </view> </view> <view class="erweima-box"><view class="erweima-in"><image src="../../images/erweima.jpg"></image></view></view> <view class="bot-text">扫一扫上面的二维码图案,关注我的益新闻中心</view> </view> </view> </view>
Page({ data: { showModalStatus: false }, powerDrawer: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function (currentStatu) { /* 动画部分 */ // 第1步:创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步:这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步:执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步:导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步:设置定时器到指定时候后,执行第二组动画 setTimeout(function () { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData( { showModalStatus: false } ); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData( { showModalStatus: true } ); } } })
以上是关于微信小程序--二维码窗口的主要内容,如果未能解决你的问题,请参考以下文章