uniapp实现左右滑动切换
在页面中<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">//这里放需要滑动的区域</view>在script中data() {return {startX: 0, //滑动开始x轴位置startY: 0, //滑动开始y轴位置moveX: 0, //滑动的x轴距离moveY
·
在页面中
<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
//这里放需要滑动的区域
</view>
在script中
data() {
return {
startX: 0, //滑动开始x轴位置
startY: 0, //滑动开始y轴位置
moveX: 0, //滑动的x轴距离
moveY: 0, //滑动的y轴距离
like_state: 0, //-1:左滑,0:没滑动,1:右滑
}
},
methods: {
touchStart(event) {
this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY;
console.log('开始触摸:', this.startX, this.startY);
},
touchMove(event) {
var currentX = event.touches[0].pageX;
var currentY = event.touches[0].pageY;
var moveX = currentX - this.startX;
var moveY = currentY - this.startY;
var text = '';
var state = 0; //-1:左滑,0:没滑动,1:右滑
// //左右方向滑动
if (Math.abs(moveX) > Math.abs(moveY)) {
if (moveX < -10) {
text = '左滑';
state = 1;
} else if (moveX > 10) {
text = '右滑';
state = -1;
}
} else { //上下方向滑动
if (moveY < 0) {
text = '上滑';
} else if (moveY > 0) text = '下滑';
}
this.like_state = state;
this.moveX = moveX;
this.moveY = moveY;
console.log('开始滑动:', this.moveX, this.moveY, this.like_state);
},
touchEnd(event) {
console.log(`移动距离:${Math.abs(this.moveX)}`)
if (Math.abs(this.moveX) > 60 && this.like_state != -100) {
var state = this.like_state
this.like_state = -100//设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
//这里放需要进行的业务逻辑
}
},
}
文章参考自https://blog.csdn.net/weixin_38233549/article/details/103854143
更多推荐
已为社区贡献3条内容
所有评论(0)