小程序 上拉菜单
template
<view class="drawer_screen" v-if="updateTel"></view> //遮罩层 <view :animation="animationData" class="drawer_attr_box" v-if="updateTel"> <view class="drawer_content"> //里面可以放你想要的一些东西 </view> </view> script //放一些点击显示的效果 util(currentStatu) { /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步：这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停 animation.translateY(240).step(); // 第4步：导出动画对象赋给数据对象储存 this.animationData = animation.export(); // 第5步：设置定时器到指定时候后，执行第二组动画 setTimeout( function() { // 执行第二组动画：Y轴不偏移，停 animation.translateY(0).step(); // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 this.animationData = animation; }.bind(this), 200 ); // 显示抽屉 if (currentStatu == "address_open") { this.addAddress = true; } if (currentStatu == "update_open") { this.updateAddresss = true; } } style //样式 .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.2; overflow: hidden; }/*content*/ .drawer_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 1001; background: #fff; } .drawer_content { padding: 20rpx 40rpx; height: 470rpx; overflow-y: scroll; } 这是目前对于我来说还算差不多满意的一个,推荐给大家!!!
更多精彩
