uni-app小程序滑动事件
<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>
data() {
return {
flag: 0,
text: '',
lastX: 0,
lastY: 0
}
}
methods: {
handletouchmove: function(event) {
// console.log(event)
if (this.flag !== 0) {
return;
}
let currentX = event.touches[0].pageX;
let currentY = event.touches[0].pageY;
let tx = currentX - this.lastX;
let ty = currentY - this.lastY;
let text = '';
this.mindex = -1;
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
if (tx < 0) {
text = '向左滑动';
this.flag = 1;
// this.getList(); //调用列表的方法
} else if (tx > 0) {
text = '向右滑动';
this.flag = 2;
}
}
//上下方向滑动
else {
if (ty < 0) {
text = '向上滑动';
this.flag = 3;
// this.getList(); //调用列表的方法
} else if (ty > 0) {
text = '向下滑动';
this.flag = 4;
}
}
//将当前坐标进行保存以进行下一次计算
this.lastX = currentX;
this.lastY = currentY;
this.text = text;
},
handletouchstart: function(event) {
// console.log(event)
this.lastX = event.touches[0].pageX;
this.lastY = event.touches[0].pageY;
},
handletouchend: function(event) {
this.flag = 0;
this.text = '没有滑动';
},
}
uni-app小程序滑动事件的更多相关文章
- 「小程序JAVA实战」 小程序的事件(11)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/ 我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击 ...
- uni与小程序,vue的区别
标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...
- 微信小程序滑动选择器
实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange ...
- 微信小程序中事件
微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...
- 微信小程序的事件
事件,视图层到逻辑层的一种通讯方式,或者将用户的行为返回到逻辑层,当我们在组件绑定事件之后,当我们触发事件,就会执行逻辑层绑定的事件,处理回调函数,当页面的事件触发之后 页面上元素一些额外事件,通过事 ...
- 小程序onShow事件获取options方法
微信小程序 onShow() 事件 onShow() 事件不接受参数,因此无法获取页面 url 传递过来的参数,只有 onLoad() 事件可以. onShow(options){ console.l ...
- Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解
Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...
- Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
- 小程序 onReachBottom 事件快速滑动时不触发的bug
一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...
随机推荐
- 【PAT甲级】1049 Counting Ones (30 分)(类似数位DP思想的模拟)
题意: 输入一个正整数N(N<=2^30),输出从1到N共有多少个数字包括1. AAAAAccepted code: #define HAVE_STRUCT_TIMESPEC #include& ...
- Tomcat热部署与热加载!
所谓的热部署与热加载就是两个值:(reloadable='true'与autoDeloy='true')
- ECS 系统 Entity-Component-System
已经推出了很久了, 貌似也有一些人开始使用, 我是在看守望先锋的程序设计相关文章的时候看到 ECS 的, 从它的设计逻辑上看, 核心就是 Composition over inheritance (o ...
- Python 中的类与对象 初认识
一:类的声明 1类的关键字: 从第一天第一个项目起我们就接触过关键字,比如False True is not None return for while elif else import等等,这是语言 ...
- 第四周之Hadoop学习(四)
上周已经成功完成了Hadoop的学习,这周则是搭建好Hadoop的安卓编程环境 今天的学习根据这篇博客:https://blog.csdn.net/HcJsJqJSSM/article/details ...
- 笔记-Python-性能优化
笔记-Python-性能优化 1. 开始 1.1. python性能差么? 做一个判断前,先问是不是. python运行效率低是事实. 1.2. 为什么? 原因: Python是 ...
- MongoDB的分片数据库命令总结
sh._adminCommand 在admin数据库运行database command ,就像db.runCommand() ,不过可以保证只在 mongos 上运行. sh._checkFullN ...
- 【原】nginx配置文件
一:下载nginx方式 1.yum install nginx 2.源码安装 二:学习网址 nginx documentation — DevDocs 三:配置文件信息 server { listen ...
- mysql 优化策略(如何利用好索引)
博客园 首页 联系 管理 随笔- 3282 文章- 0 评论- 157 mysql联合索引 命名规则:表名_字段名1.需要加索引的字段,要在where条件中2.数据量少的字段不需要加索引3.如果 ...
- 清除编译缓存DerivedDate
当多次重构工程造成代码没有错误却编译失败时,可以尝试删除DerivedData目录.DerivedData目录是Xcode的编译缓存,路径是~/Library/Developer/Xcode/Deri ...