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

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

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

touchstart在触摸开始时触发事件;

touchend在触摸结束时触发事件;

touchmove触摸的过程中不断激发这个事件;

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

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

1 2 3

< view class = "container" bindtouchstart = "touchStart" bindtouchmove = "touchMove" bindtouchend = "touchEnd" >   // do something </ view >

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

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 <= -40 && time < 10){      if (tmpFlag && nth < 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 < 10){      if (tmpFlag && nth > 0){        nth = --nth < 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 ; // 回复滑动事件

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

原文链接：http://www.jb51.net/article/107020.htm