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


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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
微信小程序 动画的简单实例
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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
一分钟理解js闭包
2016/05/04 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
angular十大常见问题
2017/03/07 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
学生评语大全
2014/04/18 职场文书
中秋节活动总结
2014/08/29 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
运动会3000米加油稿
2015/07/21 职场文书
节约用水广告语60条
2019/11/14 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL