zoukankan      html  css  js  c++  java
  • uniapp滑动操作

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

      

  • 相关阅读:
    ecshop中关于语言配置项的管理
    ecshop中猜你喜欢的原理
    CSS之Position详解(自cnblogs)
    包装类
    for循环的另一种写法
    date.calendar学习总结
    java对MySql数据访问
    java中对MySql的配置
    小程序在js里获取控件的两种方式
    样式一直没生效,发现css没加前面的小点!!!
  • 原文地址:https://www.cnblogs.com/lizhao123/p/11430689.html
Copyright © 2011-2022 走看看