wxml：
wxml： <viewbindtap='showshadow'>#点击显示</view> <!-- 遮罩层 --> <view class="shadow" wx:if="{{chooseSize}}" bindtap='hideModal'></view> <!-- 上滑高度 --> <view class='choosen' wx:if="{{chooseSize}}" animation='{{animationData}}'> <!-- 内容 --> <view class="container-box"> 这里为内容 </view> </view> wxcss： /* 遮罩 */ .shadow{ width: 100%; height: 100%; z-index: 80; position: absolute; top: 0; background-color: #000; opacity: 0.5; } /* 上滑高度 */ .choosen{ width: 100%; height: 80%; position: fixed; bottom: 0; background-color: #fff; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; z-index: 98; } /* 内容 */ .container-box { display: flex; height: 100%; flex-direction: column; width: 100%; border-radius: 15rpx; margin: 0 auto; z-index: 98; } /* 遮罩结束 */ wxjs： // 显示遮罩层 showshadow:function(e){ if (this.data.chooseSize == false) { this.chooseSezi() } else { this.hideModal() } }, // 动画函数 chooseSezi: function (e) { // 用that取代this，防止不必要的情况发生 var that = this; // 创建一个动画实例 var animation = wx.createAnimation({ // 动画持续时间 duration: 500, // 定义动画效果，当前是匀速 timingFunction: 'linear' }) // 将该变量赋值给当前动画 that.animation = animation // 先在y轴偏移，然后用step()完成一个动画 animation.translateY(1000).step() // 用setData改变当前动画 that.setData({ // 通过export()方法导出数据 animationData: animation.export(), // 改变view里面的Wx：if chooseSize: true }) // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间 setTimeout(function () { animation.translateY(0).step() that.setData({ animationData: animation.export(), clearcart: false }) }, 100) }, // 隐藏 hideModal: function (e) { var that = this; var animation = wx.createAnimation({ duration: 500, timingFunction: 'linear' }) that.animation = animation animation.translateY(700).step() that.setData({ animationData: animation.export() }) setTimeout(function () { animation.translateY(0).step() that.setData({ animationData: animation.export(), chooseSize: false }) }, 500) }
