实现方式
wxml代码
<!--wxml弹出框 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<view style="display: flex;flex-direction: column;background-color: green;">
<view>texy</view>
<view>saksg</view>
</view>
</view>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
js代码
/**js*/
data:{
showModalStatus:false,
},
showModal: function (e) {
// 显示遮罩层
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: true
})
}.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(),
showModalStatus: false
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 200)
}
wxss样式
/*wxss*/
.commodity_attr_box {
position: fixed;
top: 0;
width: 750rpx;
background: white;
transform: translateY(150%);
transition: all 0.4s ease;
z-index: 11;
}
.commodity_screen{
/*
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.7);
display: none;
*/
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1;
color: #fff;
}