Detailed explanation of WeChat applet sliding left and right to switch pages-Mini Program Development-php.cn

Detailed explanation of WeChat applet sliding left and right to switch pages

巴扎黑

Release： 2018-05-17 14:33:00

Original

9159 people have browsed it

微信小程序——左右滑动切换页面事件

微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。

这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。

touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
touchmove触摸的过程中不断激发这个事件;

这三个事件都有一个timeStamp的属性，查看timeStamp属性，可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

第一步：在wxml文件中绑定事件(需要左右滑动的界面)

&lt;view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
 // do something
&lt;/view>

Copy after login

第二步：在js文件中处理左右滑动逻辑

var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理 时间记录
var nth = 0;// 设置活动菜单的index
var nthMax = 5;//活动菜单的最大个数
var tmpFlag = true;// 判断左右华东超出菜单最大值时不再执行滑动事件

// 触摸开始事件
touchStart:function(e){ 
  touchDot = e.touches[0].pageX; // 获取触摸时的原点
  // 使用js计时器记录时间  
  interval = setInterval(function(){
    time++;
  },100); 
},
// 触摸移动事件
touchMove:function(e){ 
  var touchMove = e.touches[0].pageX;
  console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
  // 向左滑动  
  if(touchMove - touchDot &lt;= -40 && time &lt; 10){
    if(tmpFlag && nth &lt; nthMax){ //每次移动中且滑动时不超过最大值 只执行一次
      var tmp = this.data.menu.map(function (arr, index) {
        tmpFlag = false;
        if(arr.active){ // 当前的状态更改
          nth = index;
          ++nth;
          arr.active = nth > nthMax ? true : false;
        }
        if(nth == index){ // 下一个的状态更改
          arr.active = true;
          name = arr.value;
        }
        return arr;
      })
      this.getNews(name); // 获取新闻列表
      this.setData({menu : tmp}); // 更新菜单
    }
  }
  // 向右滑动
  if(touchMove - touchDot >= 40 && time &lt; 10){
    if(tmpFlag && nth > 0){
      nth = --nth &lt; 0 ? 0 : nth;
      var tmp = this.data.menu.map(function (arr, index) {
        tmpFlag = false;
        arr.active = false;
        // 上一个的状态更改
        if(nth == index){
          arr.active = true;
          name = arr.value;
        }
        return arr;
      })
      this.getNews(name); // 获取新闻列表
      this.setData({menu : tmp}); // 更新菜单
    }
  }
  // touchDot = touchMove; //每移动一次把上一次的点作为原点（好像没啥用）
},
 // 触摸结束事件
touchEnd:function(e){
  clearInterval(interval); // 清除setInterval
  time = 0;
  tmpFlag = true; // 回复滑动事件
},

Copy after login

The above is the detailed content of Detailed explanation of WeChat applet sliding left and right to switch pages. For more information, please follow other related articles on the PHP Chinese website!