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


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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
微信小程序 使用腾讯地图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
Syphon 秘笈
2021/03/03 冲泡冲煮
apache rewrite_module模块使用教程
2008/01/10 PHP
php header()函数使用说明
2008/07/10 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
python常见的格式化输出小结
2016/12/15 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
优秀员工表扬信
2014/01/17 职场文书
海飞丝的广告词
2014/03/20 职场文书
应届大学生求职信
2014/07/20 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书