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


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 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
详解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
YII使用url组件美化管理的方法
2015/12/28 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
详解Vue用cmd创建项目
2019/02/12 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python爬取网页转换为PDF文件
2018/06/07 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
三维科技面试题
2013/07/27 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
学术会议欢迎词
2014/01/09 职场文书
新学期开学寄语
2014/01/18 职场文书
房地产开发项目建议书
2014/05/16 职场文书
五一促销活动总结
2014/07/01 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
好员工观后感
2015/06/17 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
PyQt5实现多张图片显示并滚动
2021/06/11 Python