<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"> </view>
data() { return { flag: 0,//1向左滑動,2向右滑動,3向上滑動 4向下滑動 text: '',//向哪里滑動 lastX: 0, lastY: 0, index:0 } }
methods: { handletouchmove: function(event) { // console.log(event) if (this.flag !== 0) { return; } let currentX = event.changedTouches[0].pageX; let currentY = event.changedTouches[0].pageY; let tx = currentX - this.lastX; let ty = currentY - this.lastY; let text = ''; this.mindex = -1; //左右方向滑動 if (Math.abs(tx) > Math.abs(ty)) { if (tx < 0) { text = '向左滑動'; this.flag = 1; // this.getList(); //調用列表的方法 } else if (tx > 0) { text = '向右滑動'; this.flag = 2; } } //上下方向滑動 else { if (ty < 0) { text = '向上滑動'; this.flag = 3; // this.getList(); //調用列表的方法 } else if (ty > 0) { text = '向下滑動'; this.flag = 4; } } //將當前坐標進行保存以進行下一次計算 this.lastX = currentX; this.lastY = currentY; this.text = text; }, handletouchstart: function(event) { // console.log(event) this.lastX = event.changedTouches[0].pageX; this.lastY = event.changedTouches[0].pageY; }, handletouchend: function(event) { this.flag = 0; this.text = '沒有滑動'; }, }