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

      

  • 相关阅读:
    自动化部署之jenkins及简介
    gitlab的备份与恢复与迁移
    P2561 [AHOI2002]黑白瓷砖
    P2042 [NOI2005]维护数列
    P2156 [SDOI2009]细胞探索
    P2154 [SDOI2009]虔诚的墓主人
    P2148 [SDOI2009]E&D
    2019.2.26考试T2 矩阵快速幂加速DP
    loj #6485. LJJ 学二项式定理 (模板qwq)
    P3224 [HNOI2012]永无乡
  • 原文地址:https://www.cnblogs.com/lizhao123/p/11430689.html
Copyright © 2011-2022 走看看