微信小程序监听手势滑动切换页面实例详解

2024-09-29 12:04:58

微信小程序监听手势滑动切换页面实例详解

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); // 清除setInterval
  time = 0;
 },
.
.
.
})

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

微信小程序向左滑动删除功能的实现

微信小程序向左滑动删除功能的实现实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst
微信小程序左右滑动切换页面详解及实例代码

微信小程序--左右滑动切换页面事件微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov
详解微信小程序开发之下拉刷新上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto
微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml:  <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&
微信小程序页面滑动屏幕加载数据效果

滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意.我们先看看效果图: 创建目录首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建.如图所示: 创建lists.js文件以下是lists.js代码 var app = getApp() Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loa
微信小程序详解下拉加载与上拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性属性类型描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法属性类
微信小程序两种滑动方式（横向滑动，竖向滑动）详细及实例代码

微信小程序滑动方式竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view> <view style="background: green; widt
微信小程序模板之分页滑动栏

本文实例为大家分享了微信小程序分页滑动栏的具体代码,供大家参考,具体内容如下功能: 1.分页栏与滑动视图绑定 2.点击分页栏自动滑动到对应视图 3.滑动的到视图对应分页栏自动显示选中样式效果图上代码 wxml <view class="tapNav"> <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="v
微信小程序图片横向左右滑动案例

本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q
微信小程序-横向滑动scroll-view隐藏滚动条

wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

微信小程序 监听手势滑动切换页面实例详解

相关推荐

随机推荐

微信小程序监听手势滑动切换页面实例详解