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


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检测对象中是否存在某个属性判断方法小结
May 19 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
js实现简单音乐播放器
Jun 30 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
详解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脚本的10个技巧(2)
2006/10/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php Static关键字实用方法
2010/06/04 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
javascript实现动态标签云
2015/10/16 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python构建指数平滑预测模型示例
2019/11/21 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
keras之权重初始化方式
2020/05/21 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
python如何快速拼接字符串
2020/10/28 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
秋季运动会通讯稿
2014/01/24 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
见习报告格式要求
2014/11/04 职场文书