lizhao123
<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 = \'没有滑动\';
        },
}

  

分类:

技术点:

相关文章:

  • 2018-01-30
  • 2021-11-03
  • 2021-12-12
  • 2020-11-04
  • 2021-11-13
  • 2021-09-30
  • 2021-11-26
  • 2021-08-27
猜你喜欢
  • 2021-02-18
  • 2021-11-13
  • 2021-11-17
  • 2021-09-21
  • 2021-09-18
  • 2019-12-19
  • 2021-10-16
相关资源
相似解决方案