微信小程序左右滑动方法

最新推荐文章于 2024-03-18 15:27:24 发布

Roottt_

最新推荐文章于 2024-03-18 15:27:24 发布

阅读量3.6k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43896125/article/details/128330986

版权

在这里插入图片描述
实现小程序左右滑动操作

wxml，在当前view层滑动操作

<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani}}">

data数据

 status:"0" //状态显示参数
 startX:0,
 endX:0,
 moveFlag:true,
 ani:"",

/**
   * 触摸开始事件
   * */ 
  touchStart(e:any) {
    this.data.startX = e.touches[0].pageX; // 获取触摸时的原点
    this.data.moveFlag = true;
  },
 
  /**
   * 触摸移动事件
   * */ 
  touchMove(e:any) {
    this.data.endX = e.touches[0].pageX; // 获取触摸时的原点
    if ( this.data.moveFlag) {
      if ( this.data.endX -  this.data.startX > 50) {
        console.log("move right");
        this.move2right();
        this.data.moveFlag = false;
      }
      if ( this.data.startX -  this.data.endX > 50) {
        console.log("move left");
        this.move2left();
        this.data.moveFlag = false;
      }
    }
  },
 
  /**
   * 触摸结束事件
   * */ 
  touchEnd () {
    this.data.moveFlag = true; // 回复滑动事件
  },

  /**
   * 右移，向左滑动操作
   * */
  move2left(){
    let status = Number(this.data.status); 
    if (status === 2 ) { //最右，不移动
      return
    }
    //....移动成功，执行方法
  },
  /**
   * 左移，向右滑动操作
   * */
  move2right(){
    let status = Number(this.data.status); 
    if (status === 0 ) {//最左，不移动
      return
    }
     //....移动成功，执行方法
  },