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条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...
随机推荐
- hive启动报错(整合spark)
spark整合hive后,hive启动报错: ls: cannot access /export/servers/spark/lib/spark-assembly-*.jar: No such fil ...
- cmd命令下载maven管理需要的依赖jar包
首先在maven官网https://mvnrepository.com/ 搜索你需要的jar包,找到下面的下载链接,在修改命令,然后cmd下载. cmd命令下载Maven需要jar包 cmd输入下面 ...
- SpringBoot爬虫小说阅读网站,定时更新小说和抓取功能
SpringBoot 小说爬虫搭建阅读网站 通过jsoup采集数据到mysql数据.redis作为缓存框架,减轻服务器压力.部署在linux,网站UI套纵横中文网! http://47.107.116 ...
- 一文解读IBMS (转)
IBMS系统是面向建筑设备生命周期的管理:面向楼宇的管理者和使用者:是传统BAS系统数据及功能的聚合. 更高效的分析和管理.更复杂的应用:跨平台.跨品牌的整合各子系统数据提供一套采集楼宇设备实时数据的 ...
- SpringBoot与Mybatis-plus整合,代码生成mvc层
一.添加pom依赖 <!-- mysql驱动 --> <dependency> <groupId>mysql</groupId> <artifac ...
- PTA的Python练习题(八)
从 第3章-15 统计一行文本的单词个数 继续 1. s = input() count=0 for c in s: if c==' ': count=count+1 if c=='.': break ...
- Linux命令:grep命令 | egrep命令
grep:文本搜素工具,根据用户指定的文本模式对目标文件进行逐行搜索,显示能被模式所匹配到的行 包含三个命令:grep.egrep(相当于grep -E 扩展的正则表达式)和fgrep(相当于grep ...
- 常见Linux发行版有哪些?
Linux 发行版(英语:Linux distribution,也被叫做GNU/Linux 发行版),为一般用户预先集成好的Linux操作系统及各种应用软件.一般用户不需要重新编译,在直接安装之后,只 ...
- 说说maven依赖冲突,依赖调解,依赖传递和依赖范围
说maven依赖冲突之前需要先说说maven的 依赖传递. 依赖传递 当前项目引入了一个依赖,该依赖的依赖也会被引入项目.更加准确的说法是,maven会解析直接依赖的POM,将那些必要的间接依赖,以传 ...
- 112、Java中String类之字符串文本拆分为指定的个数
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...