微信小程序 页面滑动事件的实例详解


Posted in Javascript onOctober 12, 2017

微信小程序——页面滑动事件

wxml:

<view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 100%px; height : 40px;">
 {{text}}
 </view>

wxss:

.ball {
  box-shadow:2px 2px 10px #AAA;
  border-radius: 20px;
  position: absolute; 
 }

js:

//js
Page({
 data: {
  lastX: 0,     //滑动开始x轴位置
  lastY: 0,     //滑动开始y轴位置
  text: "没有滑动",
  currentGesture: 0, //标识手势
 },
 //滑动移动事件
 handletouchmove: function (event) {
  var currentX = event.touches[0].pageX
  var currentY = event.touches[0].pageY
  var tx = currentX - this.data.lastX
  var ty = currentY - this.data.lastY
  var text = ""
  //左右方向滑动
  if (Math.abs(tx) > Math.abs(ty)) {
   if (tx < 0)
    text = "向左滑动"
   else if (tx > 0)
    text = "向右滑动"
  }
  //上下方向滑动
  else {
   if (ty < 0)
    text = "向上滑动"
   else if (ty > 0)
    text = "向下滑动"
  }

  //将当前坐标进行保存以进行下一次计算
  this.data.lastX = currentX
  this.data.lastY = currentY
  this.setData({
   text: text,
  });
 },

 //滑动开始事件
 handletouchtart: function (event) {
  this.data.lastX = event.touches[0].pageX
  this.data.lastY = event.touches[0].pageY
 },
 //滑动结束事件
 handletouchend: function (event) {
  this.data.currentGesture = 0;
  this.setData({
   text: "没有滑动",
  });
 },
})

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
微信小程序 动画的简单实例
Oct 12 #Javascript
node通过npm写一个cli命令行工具
Oct 12 #Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
You might like
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
详解php命令注入攻击
2019/04/06 PHP
actionscript与javascript的区别
2011/05/25 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
python多线程http下载实现示例
2013/12/30 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
创业资金计划书
2014/02/06 职场文书
实习评语大全
2014/04/26 职场文书
承诺书格式范文
2014/06/03 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
家装电话营销开场白
2015/05/29 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
Nginx配置https的实现
2021/11/27 Servers