WXML
<view bindtap='showModal' class='click'><text>click</text></view>
<view class="commodity_screen {{showModalStatus?'active':''}}" animation="{{animationBG}}" bindtap="hideModal"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtouchstart="mytouchstart" catchtouchmove="mytouchmove" bindtouchend="mytouchend" catchtap='hideModal'></view>
WXSS
.click{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/*使屏幕变暗 */
.commodity_screen {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0;
overflow: hidden;
z-index: 1000;
color: #fff;
transition: all 2s ease;
}
.commodity_screen.active {
display: block;
}
/*对话框 */
.commodity_attr_box {
height: 1120rpx;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #f8f8f8;
/* padding-top: 20rpx; */
}
JS
Page({
data: {
},
mytouchstart: function (e) {
console.log(e.timeStamp + '- touch start')
var startPoint = [e.touches[0].pageX, e.touches[0].pageY]
this.setData({
startPoint: startPoint
})
},
mytouchend: function (e) {
console.log(e.timeStamp + '- touch end')
console.log(e)
var endPoint = [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
this.setData({
endPoint: endPoint
})
var startPoint = this.data.startPoint
var y = endPoint[1] - startPoint[1]
console.log('最终移动了Y=' + y)
if (y > 0) {
// this.hideModal()
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
this.animation = animation
animation.translateY(900).step()
var animationBG = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animationBG.opacity(0).step()
this.setData({
animationData: animation.export(),
animationBG: animationBG.export(),
})
setTimeout(function () {
this.setData({
showModalStatus: false
})
}.bind(this), 500)
this.setData({
noscroll: ''
})
} else {
// this.showModal()
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
this.animation = animation
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}
},
mytouchmove: function (e) {
console.log(e.timeStamp + '- touch move')
var curPoint = [e.touches[0].pageX, e.touches[0].pageY]
var startPoint = this.data.startPoint
var y = curPoint[1] - startPoint[1]
console.log(y)
var animation = wx.createAnimation({
duration: 0,
timingFunction: 'ease',
delay: 0
})
this.animation = animation
if (y > -50) {
animation.translateY(y).step()
this.setData({
animationData: animation.export()
})
}
},
//显示对话框
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
animation.translateY(900).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 0)
var animationBG = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animationBG.opacity(0.5).step()
this.setData({
animationBG: animationBG.export()
})
this.setData({
noscroll: 'noscroll'
})
},
//隐藏对话框
hideModal: function () {
console.log('hideModal')
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
animation.translateY(500).step()
var animationBG = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
animationBG.opacity(0).step()
this.setData({
animationData: animation.export(),
animationBG: animationBG.export()
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
this.setData({
noscroll: ''
})
},
})
问题：IOS 性能可以，安卓 性能堪忧
