小程序監(jiān)聽屏幕滑動(dòng)事件

功能設(shè)計(jì)背景

1. 小程序頁(yè)面點(diǎn)擊事件的坐標(biāo)系是以左下角為原點(diǎn)的直角坐標(biāo)系。
2. 微信小程序提供bindtouchstart和bindtouchend接口用于監(jiān)聽觸點(diǎn)的變化。

功能實(shí)現(xiàn)

1.在你需要監(jiān)聽的塊外增加監(jiān)聽遮罩層，包含待監(jiān)聽塊在內(nèi)

<view  bindtouchstart="touchStart" bindtouchend="touchEnd">
	
view>

2.根據(jù)觸點(diǎn)的起始位置和終止位置計(jì)算滑動(dòng)方向（在data中配置touchx和touchy數(shù)值）

    touchStart(e) {
      console.log(e)
      var that = this;
      that.setData({
        touchx: e.changedTouches[0].clientX,
        touchy: e.changedTouches[0].clientY
      })
    },
    touchEnd(e) {
      console.log(e)
      var that = this;
      let x = e.changedTouches[0].clientX;
      let y = e.changedTouches[0].clientY;
      let turn = "";
      if (x - that.data.touchx > 50 && Math.abs(y - that.data.touchy) < 50) {      //右滑
        turn = "right";
      } else if (x - that.data.touchx < -50 && Math.abs(y - that.data.touchy) < 50) {   //左滑
        turn = "left";
      }
      if(y - that.data.touchy > 50 && Math.abs(x - that.data.touchx) < 50){ //下滑
        turn = "down";
      }else if(y - that.data.touchy < -50 && Math.abs(x - that.data.touchx) < 50){ //上滑
        turn="up";
      }
      //根據(jù)方向進(jìn)行操作
      if(turn == 'down'){
        //下滑觸發(fā)操作
      }
    },