小程序菜单栏型弹出框

这是用的小程序自带的动画事件来是我们的弹出框显示和

var animation; Page({    /**    * 页面的初始数据    */   data: {     animationData: {}   },    tanchu:function(){     animation = wx.createAnimation({       duration: 1000,       timingFunction: 'ease',     })      this.animation = animation      animation.translate(0,-153).step();     this.setData({       animationData: animation.export()     })     },   hideModal:function(){     animation.translate(0, 0).step();     this.setData({       animationData: animation.export()     })   }, })

这部分是页面的，也没什么好说的了。

<!--a/a.wxml--> <button bindtap='tanchu'>点击</button> <view class='kuai' animation="{{animationData}}">   <view class='les'>操作1</view>   <view class='les'>操作2</view>   <view class='les' bindtap='hideModal'>取消</view> </view>

这是css其实没什么要写的。只要根据自己需求写样式，一开始先使用偏移将菜单栏移除试图区域。

.kuai{   width: 100%;   height: 300rpx;   background-color: #888888;   margin-bottom: -153px;   position: fixed;   bottom: 0; } .les{   color: white;   text-align: center;   height: 100rpx;   width: 100%;   line-height: 100rpx;   border-bottom:1rpx solid black;  }

样式丑是丑了点，毕竟只是练下手QAQ。

支持一下嘻嘻

文章来源: 小程序菜单栏型弹出框