uniapp,微信小程序滑動事件


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

JS

data() {
       return {
           flag: 0,
           text: '',
           lastX: 0,
           lastY: 0
  }
}
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 = '沒有滑動';
        },
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM