wxml:
<page-container show="{{showPage}}" position="right">
<view style="background: chocolate;height: 100vh;color: #fff;" bind:touchstart="touchStart" bind:touchend="touchEnd" bind:touchcancel="touchCancel">
内容
</view>
</page-container>
<button bindtap="openPage"></button>
page-container部分的js:
data:{
showPage:false
}
openPage(){
this.setData({
showPage:true
})
},
触摸部分的js：
在page外部定义变量：
var minOffset = 30;//最小偏移量，低于这个值不响应滑动处理
var minTime = 60;// 最小时间，单位：毫秒，低于这个值不响应滑动处理
var startX = 0;//开始时的X坐标
var startY = 0;//开始时的Y坐标
var startTime = 0;//开始时的毫秒数
在page内：
/**
* 触摸开始事件，初始化startX、startY和startTime
*/
touchStart: function (e) {
console.log('touchStart', e)
startX = e.touches[0].pageX; // 获取触摸时的x坐标
startY = e.touches[0].pageY; // 获取触摸时的x坐标
startTime = new Date().getTime();//获取毫秒数
},
/**
* 触摸取消事件 （手指触摸动作被打断，如来电提醒，弹窗），要将startX、startY和startTime重置
*/
touchCancel: function (e) {
startX = 0;//开始时的X坐标
startY = 0;//开始时的Y坐标
startTime = 0;//开始时的毫秒数
},
/**
* 触摸结束事件，主要的判断在这里
*/
touchEnd: function (e) {
let that=this;
console.log('touchEnd', e)
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var touchTime = new Date().getTime() - startTime;//计算滑动时间
//开始判断
//1.判断时间是否符合
if (touchTime >= minTime) {
//2.判断偏移量：分X、Y
var xOffset = endX - startX;
var yOffset = endY - startY;
console.log('xOffset', xOffset)
console.log('yOffset', yOffset)
//①条件1（偏移量x或者y要大于最小偏移量）
//②条件2（可以判断出是左右滑动还是上下滑动）
if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= minOffset) {
//左右滑动
//③条件3（判断偏移量的正负）
if (xOffset < 0) {
console.log('向左滑动')
} else {
console.log('向右滑动')
//关闭page-container
that.setData({
showPage:false
})
}
} else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
//上下滑动
//③条件3（判断偏移量的正负）
if (yOffset < 0) {
console.log('向上滑动')
} else {
console.log('向下滑动')
}
}
} else {
console.log('滑动时间过短', touchTime)
}
},
