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

 更新时间:2019年08月26日 09:30:57   作者:Vam的金豆之路  
这篇文章主要为大家详细介绍了微信小程序实现手势滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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;
 }, 
})

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

相关文章

  • bootstrapValidator 重新启用提交按钮的方法

    bootstrapValidator 重新启用提交按钮的方法

    bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效。如何重新启用提交按钮呢?下面小编给大家介绍下bootstrapValidator 重新启用提交按钮的方法,需要的朋友可以参考下
    2017-02-02
  • javascript实现移动端上传图片功能

    javascript实现移动端上传图片功能

    这篇文章主要为大家详细介绍了javascript实现移动端上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS实现生成会变大变小的圆环实例

    JS实现生成会变大变小的圆环实例

    这篇文章主要介绍了JS实现生成会变大变小的圆环,涉及javascript数学运算及页面样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Bootstrap3 内联单选和多选框

    Bootstrap3 内联单选和多选框

    这篇文章主要介绍了Bootstrap3 内联单选和多选框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JavaScript滚动轮播图制作原理详解

    JavaScript滚动轮播图制作原理详解

    这篇文章主要为大家详细介绍了JavaScript滚动轮播图制作原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 简单了解JavaScript弹窗实现代码

    简单了解JavaScript弹窗实现代码

    这篇文章主要介绍了简单了解JavaScript弹窗实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript中的函数重载深入理解

    JavaScript中的函数重载深入理解

    将函数名作为指向函数的指针,有助于理解为什么ECMAScript中没有函数重载的概念,需要的朋友可以参考下
    2014-08-08
  • JavaScript类的继承全面示例讲解

    JavaScript类的继承全面示例讲解

    在 ES5 中,类的继承可以有多种方式,然而过多的选择有时反而会成为障碍,ES6 统了类继承的写法,避免开发者在不同写法的细节之中过多纠缠,但在介绍新方法之前,还是有必要先回顾下ES5中类的继承方式
    2022-08-08
  • JavaScript打印网页指定区域的例子

    JavaScript打印网页指定区域的例子

    这篇文章主要介绍了JavaScript打印网页指定区域的例子,需要的朋友可以参考下
    2014-05-05
  • 手机端转盘抽奖代码分享

    手机端转盘抽奖代码分享

    转盘,也有一种说法叫抽奖转盘,大体上是由一块圆形的面板上面有很多的奖项设置,在圆形面板的前面,还有一根指针是固定的,下面,小编给大家分享手机端转盘抽奖,需要的朋友可以参考下
    2015-09-09

最新评论