1.在view标签绑定上touchStart,touchMove,touchEnd事件

<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd">监听左右滑动事件</view>

2.在js中写上

Page({/*** 页面的初始数据*/data: {touchS : [0,0],touchE : [0,0]},// 触摸开始事件touchStart: function(e){// console.log(e.touches[0].pageX)let sx = e.touches[0].pageXlet sy = e.touches[0].pageYthis.data.touchS = [sx,sy]},// 触摸滑动事件touchMove: function(e){let sx = e.touches[0].pageX;let sy = e.touches[0].pageY;this.data.touchE = [sx, sy]},// 触摸结束事件touchEnd: function(e){let start = this.data.touchSlet end = this.data.touchE// console.log(start)// console.log(end)if(start[0] < end[0] - 50){// console.log('向右滑,这里可以调用方法,及页面跳转事件')}else if(start[0] > end[0] + 50){// console.log('向左滑,这里可以调用方法,及页面跳转事件')}else{// console.log('向上或向下滑动')}},})

微信小程序监听手势左右滑动相关推荐

  1. 微信小程序 监听手势滑动切换页面

    1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bin ...

  2. 微信小程序监听 watch方法

    微信小程序监听 watch方法 使用过vue框架的应该使用过watch监听变量 那么 在微信小程序中 怎么使用watch 首先我们需要引入一个watch.js文件到我们的全局中 // 监听页面数据变化 ...

  3. 微信小程序 监听位置信息

    wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram ...

  4. 微信小程序监听服务器发送消息,微信小程序实时聊天WebSocket

    本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js ...

  5. 微信小程序监听实时地理位置变化事件接口申请

    监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground.wx.startLocationUpdate使用. 申请开通 暂只针对国内主体如下类目的小程序开放, ...

  6. 微信小程序--监听对象属性变化

    本以为小程序会跟vue差不多有像watch一类的方法,好吧并没有.百度了很多,看了很多大神写的案例.奈何天资不太行,虽然效果有了,但还是不太懂. app.js //监听属性值函数watch:funct ...

  7. 微信小程序监听app.js中的globalData属性,

    // app.js中 //app.js App({onLaunch: function () {let that = this// 在这里用定时器模拟网络请求的过程setTimeout(functio ...

  8. 微信小程序监听屏幕上滑下滑事件

    需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验.避免想要搜索就必须上滑至顶部.. 实现: 首先输入框得固定在顶部. wxml:class="sea ...

  9. 微信小程序-监听屏幕滚动

    一.效果: 功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样. 二.实现: 运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离. 1).js ...

  10. 微信小程序 —— 监听网络状态

    在app.js的onLaunch wx.onNetworkStatusChange((res) => {if(!res.isConnected){console.log(res.isConnec ...

最新文章

  1. 派生类中构造函数与虚构函数的研究
  2. java线程interu_Intel 10nm服务器U首曝:多线程性能提升118%
  3. PDS+VL Motion对发动机曲轴系统不平衡载荷进行仿真分析
  4. 基于JAVA+SpringMVC+Mybatis+MYSQL的办公用品销售平台进销存系统
  5. suse tomcat mysql_JDK TOMCAT MYSQL SUSE LINUX 环境搭建
  6. 在取证过程中,常见的一些注册表键值整理
  7. 操作系统--EXT4文件系统结构分析
  8. 利用pandas 读取pdf中的表格文件
  9. 研究生师兄谈SCI论文写作心得
  10. Outlook 2007对于不同(Gmail.Sina.Sohu.126.163.Yahoo.Hotmail)Email账号设置
  11. crm系统如何处理好客户投诉问题?
  12. Blender软件介绍与使用心得
  13. 一键生成?从照片生成人脸 3D 模型 #AvatarMe
  14. android simpleperf工具介绍
  15. 用python做元旦贺卡_用AI帮你画新年贺卡:只需输入几个单词,就能模仿大师名作...
  16. STL源码剖析(十三)关联式容器之rb_tree
  17. 洛谷 P3460 [POI2007]TET-Tetris Attac
  18. react本地储存_如何在React项目中利用本地存储
  19. Java输出矩形、三角形、圆形面积和周长:
  20. MySQL 的 LIKE 语句

热门文章

  1. SCIEI 英文PAPER投稿经验【转】
  2. 带你了解电机驱动板的四大分类
  3. oracle append parallel,大量数据快速插入方法探究[nologging+parallel+append]
  4. 前端开发工程师需要具备哪些专业技能?
  5. 合唱队形——线性dp
  6. mongodb 启动报错 ERROR: child process failed, exited with error number 1
  7. eact native生成APP报错:You have not accepted the license agreements of the following SDK components:...
  8. php footer'=%3e2,为基于Wordpress的博客添加CNZZ统计代码
  9. Excel:INDEX与MATCH函数
  10. 深入分析Zookeeper的Leader选举原理