实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下：
可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。
1. wxml代码
<view class="wrap"><view bindtap="showModal"><text>{{value}}</text><icon class="arrow"></icon></view><!-- modal --><view class="modal modal-bottom-dialog" hidden="{{hideFlag}}"><view class="modal-cancel" bindtap="hideModal"></view><view class="bottom-dialog-body bottom-positon" animation="{{animationData}}"><!-- --><view class='Mselect'><view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'>{{item}}</view></view><view></view><view class='Mcancel' bindtap='mCancel'><text>取消</text></view></view></view></view>
modal中，蓝色框框起来的，可按需替换。
2. wxss代码
.arrow{display:inline-block;border:6px solid transparent;border-top-color:#000;margin-left:8px;position:relative;top:6rpx;}/* ---------------------------- *//*模态框*/.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}/*动画前初始位置*/.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}/* 底部弹出框 */.bottom-positon{text-align: center;}.Mselect{margin-bottom: 20rpx;}.Mselect view{padding: 26rpx 0;background: #fff;}.Mselect view:not(:last-of-type){border-bottom: 1px solid #dfdede;}.Mcancel{background: #fff;padding: 26rpx 0;}
如果项目中，多个页面使用了同样效果弹出框，如下的代码可以放到公共样式文件app.wxss中。
3. js代码
Page({/*** 页面的初始数据*/data: {optionList:['所有','选项1','选项2'],value:'所有',hideFlag: true,//true-隐藏 false-显示animationData: {},//},// 点击选项getOption:function(e){var that = this;that.setData({value:e.currentTarget.dataset.value,hideFlag: true})},//取消mCancel: function () {var that = this;that.hideModal();},// ----------------------------------------------------------------------modal// 显示遮罩层showModal: function () {var that = this;that.setData({hideFlag: false})// 创建动画实例var animation = wx.createAnimation({duration: 400,//动画的持续时间timingFunction: 'ease',//动画的效果 默认值是linear->匀速，ease->动画以低速开始，然后加快，在结束前变慢})this.animation = animation; //将animation变量赋值给当前动画var time1 = setTimeout(function () {that.slideIn();//调用动画--滑入clearTimeout(time1);time1 = null;}, 100)},// 隐藏遮罩层hideModal: function () {var that = this;var animation = wx.createAnimation({duration: 400,//动画的持续时间 默认400mstimingFunction: 'ease',//动画的效果 默认值是linear})this.animation = animationthat.slideDown();//调用动画--滑出var time1 = setTimeout(function () {that.setData({hideFlag: true})clearTimeout(time1);time1 = null;}, 220)//先执行下滑动画，再隐藏模块},//动画 -- 滑入slideIn: function () {this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画this.setData({//动画实例的export方法导出动画数据传递给组件的animation属性animationData: this.animation.export()})},//动画 -- 滑出slideDown: function () {this.animation.translateY(300).step()this.setData({animationData: this.animation.export(),})},})
如上，用“// ----------------------------------------------------------------------modal”隔开的以下的代码可不需要动。
如果一个页面中使用了两个同样效果的弹出框，只需要稍微修改一下就行了
最后看看效果图。
