左右滑动触发事件
给组件绑定事件,主要利用组件的触摸开始和触摸结束事件来实现:
<view @touchstart="touchStart" @touchend="touchEnd">
2,声明初始化点击位置变量startX
data() {
return {
list:[],
pageNum:1,
pageSize:10,
//初始化点击位置的x坐标
startX:0,
}
},
3,利用开始触摸和结束触摸的位置的x坐标来判断是左滑还是右滑。
/**
* 触摸开始
* @param {Object} e
*/
touchStart: function (e) {
if (e.touches.length == 1) {
//设置触摸起始点水平方向位置
this.startX=e.touches[0].clientX;
}
},
/**
* 触摸结束
* @param {Object} e
*/
touchEnd: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
let diff = endX-this.startX;
if(Math.abs(diff)>20){
if(diff>0){