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


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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
轮播的简单实现方法
Jul 28 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
详解vue中async-await的使用误区
Dec 05 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中apc缓存使用示例
2013/12/25 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
音乐幼师求职信
2014/07/09 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
辞职信标准格式
2015/02/27 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python