微信小程序左右滑动切换页面详解及实例代码


Posted in Javascript onFebruary 28, 2017

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

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

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

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

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

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

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

第二步:在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 <= -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; // 回复滑动事件
},

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

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
利用php生成验证码
2017/02/23 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python矩阵的转置和逆转实例
2018/12/12 Python
pandas分区间,算频率的实例
2019/07/04 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python解析json代码实例解析
2019/11/25 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
职专应届生求职信
2013/11/16 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
外出听课学习心得体会
2016/01/15 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
html5调用摄像头截图功能
2022/01/18 Javascript