微信小程序 上下左右滑动

微信小程序支持taughtstart，taughtmove，taughtend事件，通过调用这几个事件，判断手指的位置，通过位置的差值来判断手指是怎么滑动的,把事件绑定在一个容器上，设定这个容器的大小，就可以在容器内划动，然后判断其划动方向。

  {{text}}

data:{
   flag:0,
   text:''
},
handletouchmove: function(event) {
    // console.log(event)
    if (this.data.flag!== 0){
      return
    }
    let currentX = event.touches[0].pageX;
    let currentY = event.touches[0].pageY;
    let tx = currentX - this.data.lastX;
    let ty = currentY - this.data.lastY;
    let text = "";
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑动";
        this.data.flag= 1
      }
      else if (tx > 0) {
        text = "向右滑动";
        this.data.flag= 2
      }

    }
    //上下方向滑动
    else {
      if (ty < 0){
        text = "向上滑动";
        this.data.flag= 3

      }
      else if (ty > 0) {
        text = "向下滑动";
        this.data.flag= 4
      }

    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX;
    this.data.lastY = currentY;
    this.setData({
       text : text,
    });
  },

  handletouchstart:function(event) {
    // console.log(event)
    this.data.lastX = event.touches[0].pageX;
    this.data.lastY = event.touches[0].pageY;
  },
  handletouchend:function(event) {
    this.data.flag= 0
    this.setData({
       text : "没有滑动",
    });
  }

 

以上是核心代码

 

如果是想做手动的轮播图，可以在taughtend的事件里添加一个动画做效果，同时切换轮播图的下一张