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


Posted in Javascript onAugust 26, 2019

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

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

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

Javascript 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
js编写简单的计时器功能
Jul 15 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
You might like
php中计算时间差的几种方法
2009/12/31 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现的生成word文档功能示例
2019/08/23 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python os库常用操作代码汇总
2020/11/03 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
水产养殖学应届生求职信
2013/09/29 职场文书
求职自荐信范文格式
2013/11/29 职场文书
小小商店教学反思
2014/04/27 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL