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条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...
 
随机推荐
- js实现配置菜品规格时,向后台传一个json格式字符串
			
由于本公司做的是订餐平台,那么在上传菜品时,需要配置菜品规格,比如份量(大中小),味道(猛辣,中辣,微辣) 由于这些数据,在表的设计时 没有保存到菜品表,那么在点击保存菜品数据时,配置规格这块数据,我 ...
 - Python安装numpy,pandas慢,超时报错,下载不了的解决方法
			
由于python的默认源是国外的,所以下载的时候会很慢,甚至会出现超时下载失败,提供两个解决方法 1.设置pip的超时限制 打开cmd 输入pip --default-timeout=100 inst ...
 - Bcrypt加密算法简介
			
用户表的密码通常使用MD5等不可逆算法加密后存储,为防止彩虹表破解更会先使用一个特定的字符串(如域名)加密,然后再使用一个随机的salt(盐值)加密. 特定字符串是程序代码中固定的,salt是每个密码 ...
 - UDP通讯代码
			
UDP客户端代码: import socket # 创建套接字 socket.AF_INET:IPV4 socket.SOCK_DGRAM:UDP协议 udp_client=socket.socket ...
 - PAT T1001 Battle Over Cities-Hard Version
			
按题意枚举每个点,建立缺少该点情况下的最小生成树,取权值最大的~ #include<bits/stdc++.h> using namespace std; ; const int inf= ...
 - Java基础知识笔记第九章:组件及事件处理
			
java Swing 图形用户界面(GUI : Graphics User Interface) 窗口 JFrame常用方法 JFrame()创建一个无标题的窗口. JFrame(String s)创 ...
 - 理解错误的 Arrays.asList()
			
简介 Arrays.asList() 作用是将一个数组转换为一个List 集合. String[] myArray = { "Apple", "Banana", ...
 - Python之json库
			
JSON简介 JSON (JavaScript Object Notation) 是一种用于表示结构化数据的流行数据格式. 常用于服务器和Web应用程序之间传输和接收数据. 在Python中,JSON ...
 - sparkRDD:第4节 RDD的依赖关系;第5节 RDD的缓存机制;第6节 DAG的生成
			
4. RDD的依赖关系 6.1 RDD的依赖 RDD和它依赖的父RDD的关系有两种不同的类型,即窄依赖(narrow dependency)和宽依赖(wide dependency ...
 - JSTL fn:replace()函数替换 换行符
			
转自:http://blog.163.com/chenjie_8392/blog/static/439339842010513128139/ 近日在使用textarea时,输入了回车,为了将texta ...