微信小程序实现底部弹窗

本文实例为大家分享了微信小程序实现底部弹窗的具体代码，供大家参考，具体内容如下                    

xml:

<view bindtap="clickme">点击我可以看到底部弹框的出现</view>
?
<!--屏幕背景变暗的背景 ?-->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框 ?-->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!--自定义弹窗内容-->
</view>

css:

/*使屏幕变暗 ?*/
测试数据modity_screen {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? background: #000;
? opacity: 0.2;
? overflow: hidden;
? z-index: 1000;
? color: #fff;
}
/*对话框 */
测试数据modity_attr_box {
? height: 50%;
? width: 100%;
? overflow: hidden;
? position: fixed;
? bottom: 0;
? left: 0;
? z-index: 2000;
? background: #fff;
? padding-top: 20rpx;
}

js: 

//点击我显示底部弹出框
? clickme: function () {
? ? this.showModal();
? },
?
? //显示对话框
? showModal: function () {
? ? // 显示遮罩层
? ? var animation = wx.createAnimation({
? ? ? duration: 200,
? ? ? timingFunction: "linear",
? ? ? delay: 0
? ? })
? ? this.animation = animation
? ? animation.translateY(300).step()
? ? this.setData({
? ? ? animationData: animation.export(),
? ? ? showModalStatus: true
? ? })
? ? setTimeout(function () {
? ? ? animation.translateY(0).step()
? ? ? this.setData({
? ? ? ? animationData: animation.export()
? ? ? })
? ? }.bind(this), 200)
? },
? //隐藏对话框
? hideModal: function () {
? ? // 隐藏遮罩层
? ? var animation = wx.createAnimation({
? ? ? duration: 200,
? ? ? timingFunction: "linear",
? ? ? delay: 0
? ? })
? ? this.animation = animation
? ? animation.translateY(300).step()
? ? this.setData({
? ? ? animationData: animation.export(),
? ? })
? ? setTimeout(function () {
? ? ? animation.translateY(0).step()
? ? ? this.setData({
? ? ? ? animationData: animation.export(),
? ? ? ? showModalStatus: false
? ? ? })
? ? }.bind(this), 200)
? },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现底部弹窗的详细内容...