微信小程序实现手势滑动效果

2024-10-20 13:14:10

本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下

wxml:

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

index.js:

var touchStartX = 0;//触摸时的原点
var touchStartY = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
var touchMoveX = 0; // x轴方向移动的距离
var touchMoveY = 0; // y轴方向移动的距离

Page({

// 触摸开始事件
 touchStart: function (e) {
  touchStartX = e.touches[0].pageX; // 获取触摸时的原点
  touchStartY = e.touches[0].pageY; // 获取触摸时的原点
  // 使用js计时器记录时间
  interval = setInterval(function () {
   time++;
  }, 100);
 },
 // 触摸移动事件
 touchMove: function (e) {
  touchMoveX = e.touches[0].pageX;
  touchMoveY = e.touches[0].pageY;
 },
 // 触摸结束事件
 touchEnd: function (e) {
  var moveX = touchMoveX - touchStartX
  var moveY = touchMoveY - touchStartY
  if (Math.sign(moveX) == -1) {
   moveX = moveX * -1
  }
  if (Math.sign(moveY) == -1) {
   moveY = moveY * -1
  }
  if (moveX <= moveY) {// 上下
   // 向上滑动
   if (touchMoveY - touchStartY <= -30 && time < 10) {
    console.log("向上滑动")
   }
   // 向下滑动
   if (touchMoveY - touchStartY >= 30 && time < 10) {
    console.log('向下滑动 ');
   }
  }else {// 左右
   // 向左滑动
   if (touchMoveX - touchStartX <= -30 && time < 10) {
    console.log("左滑页面")
   }
   // 向右滑动
   if (touchMoveX - touchStartX >= 30 && time < 10) {
    console.log('向右滑动');
   }
  }
  clearInterval(interval); // 清除setInterval
  time = 0;
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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

微信小程序监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时
微信小程序实现手势滑动效果

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下 wxml: <view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > </view> index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var t
微信小程序实现手势滑动卡片效果

最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首先是卡片布局的实现: 图片(一) 如图所示,我采用绝对定位absolute的方式,辅助index,可以实现卡片的层叠效果.注意:三张卡片一定都是相同的定位,否则index可能不起作用. 代码: //设置position: absolute; left:50%:后,再 margin-left:负(一半
微信小程序swiper实现滑动放大缩小效果

效果图如下所示: 具体代码如下所示: <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:index="{{index}}&qu
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f
微信小程序左滑删除效果的实现代码

今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序实现鼠标拖动效果示例

本文实例讲述了微信小程序实现鼠标拖动效果.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{left}}px;top:{{top}}px;" bindtouchmove="viewTouchMove" >使用鼠标拖动我</view> index.js文件 Page({ data:{ left:'', top:'' },
微信小程序实现图片滚动效果示例

本文实例讲述了微信小程序实现图片滚动效果.分享给大家供大家参考,具体如下: 效果:左右滑动可以切换展示图片代码:   <swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='wid
微信小程序之swiper滑动面板用法示例

本文实例讲述了微信小程序之swiper滑动面板用法.分享给大家供大家参考,具体如下: swiper就是为了以后做轮播图用的.下面是一些它的属性 PS:关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.jb51.net/table/wx_component 或官网https://developers.weixin.qq.com/miniprogram/dev/component/ 1.首先新建一个page(记得在app.json中注册),上效果图. 2.index.
微信小程序实现选项卡滑动切换

本文实例为大家分享了微信小程序实现选项卡滑动切换的具体代码,供大家参考,具体内容如下先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNa

微信小程序实现手势滑动效果

相关推荐

随机推荐