PHP点击详情页弹出,微信小程序商品详情页中如何添加弹出框

这次给大家带来微信小程序商品详情页中如何添加弹出框，微信小程序商品详情页中添加弹出框的注意事项有哪些，下面就是实战案例，一起来看一下。

电商项目中商品详情页，加入购物车或者下单时可以选择商品属性的弹出框，通过设置view的平移动画，达到从底部弹出的样式

1.js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)//显示对话框

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)

}

2.wxss代码/*使屏幕变暗 */

.commodity_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

/*对话框 */

.commodity_attr_box {

height: 300rpx;

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #fff;

padding-top: 20rpx;

}

3.wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中初始化，初始化为false，因为最初的时候对话框并没有显示)

在这里写弹出框里面的布局

4.设置点击事件，给目标view设置点击函数showModal()或者hideModal()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：