微信小程序如何实现上滑翻页，左右上下滑动事件_微信小程序触发顶部翻页

<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>
1
2

data() {
    return {
        flag: 0,
        text: '',
        lastX: 0,
        lastY: 0
    }
}
1
2
3
4
5
6
7
8

methods: {
        handletouchmove: function(event) {
            // console.log(event)
            if (this.flag !== 0) {
                return;
            }
            let currentX = event.touches[0].pageX;
            let currentY = event.touches[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.touches[0].pageX;
            this.lastY = event.touches[0].pageY;
        },
        handletouchend: function(event) {
            this.flag = 0;
            this.text = '没有滑动';
        },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50