uniapp滑动操作
<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>
data() {
return {
flag: 0,//1向左滑动,2向右滑动,3向上滑动 4向下滑动
text: '',//向哪里滑动
lastX: 0,
lastY: 0,
index:0
}
}
methods: {
handletouchmove: function(event) {
// console.log(event)
if (this.flag !== 0) {
return;
}
let currentX = event.changedTouches[0].pageX;
let currentY = event.changedTouches[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.changedTouches[0].pageX;
this.lastY = event.changedTouches[0].pageY;
},
handletouchend: function(event) {
this.flag = 0;
this.text = '没有滑动';
},
}
uniapp滑动操作的更多相关文章
- iOS之UITableView带滑动操作菜单的Cell
制作一个可以滑动操作的 Table View Cell 本文翻译自 http://www.raywenderlich.com/62435/make-swipeable-table-view-cell- ...
- Android 屏蔽ScrollView滑动操作
屏蔽ScrollView滑动操作,如下,会用到ViewConfiguration这个类,这个类可以获取到用户是否为滑动操作的临界值. 代码如下: package com.xx.uikit.view; ...
- appium滑动操作(向上、向下、向左、向右)
appium滑动操作(向上滑动.向下滑动.向左滑动.向右滑动) 测试app:今日头条apk 测试设备:夜游神模拟器 代码如下: 先用x.y获取当前的width和height def getSize() ...
- 微信小程序开发-滑动操作
在实际应用中,当某种手势被触发后,在用户没有放开鼠标或手指前,会一直识别为该手势.比如当用户触发左滑手势后,这时再向下滑动,仍要按照左滑手势来处理. 可以定义一个标记来记录第一次识别到的手势,如果已识 ...
- Appium-Java滑动操作
Java滑动操作,通常可以直接使用API中AndroidDriver类中的swipe方法,直接进行调用 swipe(int startx, int starty, int endx, int endy ...
- 制作一个可以滑动操作的 Table View Cell
本文转载至 https://github.com/nixzhu/dev-blog Apple 通过 iOS 7 的邮件(Mail)应用介绍了一种新的用户界面方案——向左滑动以显示一个有着多个操作的菜单 ...
- python+Appium自动化:app滑动操作swipe
swipe Appium使用滑动操作用到了swipe方法,定义如下: swipe(self, start_x, start_y, end_x, end_y, duration=None) 从一个点滑动 ...
- Android SwipeActionAdapter结合Pinnedheaderlistview实现复杂列表的左右滑动操作
在上一篇博客<Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作>里,已经介绍了利用SwipeActionAdapter来左右滑动操作列表: 然,有时 ...
- Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作
我们做listview左右滑动操作时,一般中情况下,都是像QQ那样,左滑弹出操作菜单(删除.编辑),然后选择菜单操作: 这样的效果不可谓不好,算是非常经典. 另外,有少数的APP,尤其是任务管理类的A ...
随机推荐
- nodejs-Cluster模块
JavaScript 标准参考教程(alpha) 草稿二:Node.js Cluster模块 GitHub TOP Cluster模块 来自<JavaScript 标准参考教程(alpha)&g ...
- 设计和实现OLAP解决方案 [转]
第一讲 简介首先,啥叫数据仓库? 数据仓库就是数据的仓库!用外文说叫Data Warehouse,简称DW. 是不是哐当倒下一片啊,要不咱换个专业点的说法? 数据仓库是一个面向主题的.集成的.相对稳定 ...
- RecyclerView实现侧滑删除、置顶、滑动
1.首先在build.gradle里添加 compile 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.2.1' 2.设置recyclerView的item布 ...
- EM配置问题
配置EM,首先要保证dbconsole在运行. C:\Users\dingqi>emctl start dbconsoleEnvironment variable ORACLE_UNQNAME ...
- idea maven 项目 遇到 "Module not specified" 解决方法
1. 原因:我这边出现的原因是 其他同事在提交代码是 将 这个文件夹也提交了,idea 会加载 .idea 里的配置(即 他的配置),而我的 maven 配置不同,导致出错. 2. 解决方法:删除这 ...
- Spring Boot项目的不同启动方式
方式一: 直接通过IntelliJ IDEA启动,直接执行Spring Boot项目的main()方法. 方法二: 将项目打包成jar包,首先需要在pom.xml文件的根节点下添加如下配置: < ...
- 11.Vue.js-事件处理器
事件监听可以使用 v-on 指令: <div id="app"> <button v-on:click="counter += 1">增 ...
- JSP页面的基本结构
一:一个JSP页面由以下基本元素组成. (1)HTML标签 (2)CSS (3)变量和方法 (4)Java代码段 (5)JSP动作和指令 (6)其他脚本元素(如Javascript) 二:JSP的基本 ...
- JVM堆空间结构及常用的jvm内存分析命令和工具
jdk8之前的运行时数据区域 程序计数器 是一块较小的内存空间,它可以看做是当前线程所执行的字节码的行号指示器.每个线程都有一个独立的程序计数器,这类内存区域为"线程私有",此内存 ...
- HDC2021技术分论坛:如何高效完成HarmonyOS分布式应用测试?
作者:liuxun,HarmonyOS测试架构师 HarmonyOS是新一代的智能终端操作系统,给开发者提供了设备发现.设备连接.跨设备调用等丰富的分布式API.随着越来越多的开发者投入到Harmon ...