vue uniapp 如何使用左滑右滑事件
1,给组件绑定事件,主要利用组件的触摸开始和触摸结束事件来实现:<view@touchstart="touchStart" @touchend="touchEnd">2,声明初始化点击位置变量startXdata() {return {list:[],pageNum:1,pageSize:10,//初始化点击位置的x坐标startX:0,}},3,利用开始触摸和结束触摸的位置的x坐标来
·
1,给组件绑定事件,主要利用组件的触摸开始和触摸结束事件来实现:
<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){
console.log("左滑...");
}else{
console.log("右滑...");
}
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)