实现效果:
index.wxml
<view class="container"> <view>我是内容</view> </view> <view class='shade' wx:if="{{isShow}}" animation="{{animationData}}"> <text bindtap="noShade">我是遮罩</text> </view> <button type="primary" bindtap="shade" disabled="{{isDisabled}}">遮罩</button>
index.wxss
.shade { position:fixed; width:100%; height:100%; top:0px; background:rgba(0,0,0,0.4); overflow: hidden; }
index.js
Page({ /** * 页面的初始数据 */ data: { // 遮罩(true显示、false不显示) isShow: false, // 按钮是否可以点击(true不可以、false可以) isDisabled: false, // 动画 animationData: {} }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, // 遮罩 shade: function(e) { this.setData({ isShow: true, isDisabled: true }) var that = this // 实例化一个动画 var animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear', }) this.animation = animation // -500向上 500向下 // 移动(如果不写定时器移动的速度很快,体验不是很好) animation.translateY(500).step() this.setData({ animationData: animation.export() }) // 设置setTimeout来改变y轴偏移量,实现有感觉的滑动 setTimeout(function () { animation.translateY(0).step() that.setData({ animationData: animation.export() }) }, 200) }, // 取消遮罩 noShade: function(e) { var that = this //实例化一个动画 var animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear', }) this.animation = animation // -500向上 500向下 // 移动(如果不写定时器移动的速度很快,体验不是很好) animation.translateY(500).step() this.setData({ animationData: animation.export() }) // 设置setTimeout来改变y轴偏移量,实现有感觉的滑动 setTimeout(function () { animation.translateY(0).step() that.setData({ animationData: animation.export(), isShow: false, isDisabled: false }) }, 200) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })