wepy微信小程序自定义底部弹出框功能,显示与隐藏效果（淡入淡出，滑入滑出）

视图html部分

  <view class="salePz"><view class="btnSelPz" @tap="pzModelClick">去选择</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>

style样式

<style lang="less">.btnSelPz{width: 150rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;background: #2a67ea;border-radius: 10rpx;color: white;
margin-left: 10rpx;
}// 底部弹出框-------------------------------------------
.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;
}
</style>

js部分

 export default class Web extends wepy.page {data = {//弹出框optionList:['所有','选项1','选项2'],value:'所有',hideFlag: true,//true-隐藏 false-显示animationData: {},//}}// 显示遮罩层showModal () {this.hideFlag=false// 创建动画实例var animation = wx.createAnimation({duration: 400,//动画的持续时间timingFunction: 'ease',//动画的效果 默认值是linear->匀速，ease->动画以低速开始，然后加快，在结束前变慢})this.animation = animation; //将animation变量赋值给当前动画var that=thisvar time1 = setTimeout(function () {that.slideIn();//调用动画--滑入//  var that = this;clearTimeout(time1);time1 = null;}, 100)this.$apply()}// 隐藏遮罩层hideModal () {var animation = wx.createAnimation({duration: 400,//动画的持续时间 默认400mstimingFunction: 'ease',//动画的效果 默认值是linear})this.animation = animationthis.slideDown();//调用动画--滑出var that=thisvar time1 = setTimeout(function () {that.hideFlag=truethat.$apply()clearTimeout(time1);time1 = null;}, 220)//先执行下滑动画，再隐藏模块this.$apply()}//动画 -- 滑入slideIn (){this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画this.animationData=this.animation.export()this.$apply()}//动画 -- 滑出slideDown(){this.animation.translateY(300).step()this.animationData= this.animation.export()this.$apply()}methods = {// 点击选项getOption(e){this.value=e.currentTarget.dataset.valuethis.hideFlag=truethis.$apply()},//取消mCancel() {this.hideModal();this.$apply()},methods = {// 点击选项getOption(e){this.value=e.currentTarget.dataset.valuethis.hideFlag=truethis.$apply()},//取消mCancel() {this.hideModal();this.$apply()},}