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

1.对应的xml里写上手势开始、滑动、结束的监听：

<view class="touch"  bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>

2.Js:

var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
Page({data: {...}})

Page({data: {...},// 触摸开始事件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) {wx.switchTab({url: '../左滑页面/左滑页面'}); }// 向右滑动if (touchMove - touchDot >= 40 && time < 10) {console.log('向右滑动');wx.switchTab({url: '../右滑页面/右滑页面'}); }},// 触摸结束事件touchEnd: function (e) {clearInterval(interval); // 清除setIntervaltime = 0;},
.
.
.
})

微信小程序监听手势滑动切换页面相关推荐

微信小程序监听 watch方法
微信小程序监听 watch方法使用过vue框架的应该使用过watch监听变量那么在微信小程序中怎么使用watch 首先我们需要引入一个watch.js文件到我们的全局中 // 监听页面数据变化 ...
微信小程序监听位置信息
wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram ...
微信小程序监听服务器发送消息,微信小程序实时聊天WebSocket
本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js ...
微信小程序判断当前手势滑动方向
(注:文字可能有点多可以直接复制代码到开发者工具上预览) 功能描述:文章适用于微信小程序根据滑动手势方向进行不同操作主要点:touchstart.touchend 实现思路: 变量解释:startY ...
微信小程序监听实时地理位置变化事件接口申请
监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground.wx.startLocationUpdate使用. 申请开通暂只针对国内主体如下类目的小程序开放, ...
微信小程序--监听对象属性变化
本以为小程序会跟vue差不多有像watch一类的方法,好吧并没有.百度了很多,看了很多大神写的案例.奈何天资不太行,虽然效果有了,但还是不太懂. app.js //监听属性值函数watch:funct ...
微信小程序监听app.js中的globalData属性,
// app.js中 //app.js App({onLaunch: function () {let that = this// 在这里用定时器模拟网络请求的过程setTimeout(functio ...
微信小程序监听屏幕上滑下滑事件
需求是在list页中带有搜索框,下滑时隐藏顶部输入框,上滑时显示输入框,提高一点点用户体验.避免想要搜索就必须上滑至顶部.. 实现: 首先输入框得固定在顶部. wxml:class="sea ...
微信小程序-监听屏幕滚动
一.效果: 功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样. 二.实现: 运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离. 1).js ...

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

微信小程序监听手势滑动切换页面相关推荐

最新文章

热门文章

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

微信小程序 监听手势滑动切换页面相关推荐

最新文章

热门文章

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

微信小程序监听手势滑动切换页面相关推荐