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 ...
随机推荐
- 实时数仓(二):DWD层-数据处理
目录 实时数仓(二):DWD层-数据处理 1.数据源 2.用户行为日志 2.1开发环境搭建 1)包结构 2)pom.xml 3)MykafkaUtil.java 4)log4j.properties ...
- Apache2配置文件解读
每次碰到都不知道具体的作用,所以来分析一下 配置文件结构 apache2在启动的时候自动读取/etc/apache2/apache2.conf文件的配置信息,不同的配置项按功能分布在不同的文件中,然后 ...
- HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]
转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...
- 【leetcode】917. Reverse Only Letters(双指针)
Given a string s, reverse the string according to the following rules: All the characters that are n ...
- WebService学习总览
[1]WebService简介 https://blog.csdn.net/xtayfjpk/article/details/12256663 [2]CXF中Web服务请求处理流程 https://b ...
- RecyclerView实现侧滑删除、置顶、滑动
1.首先在build.gradle里添加 compile 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.2.1' 2.设置recyclerView的item布 ...
- Linux基础命令---slabtop
slabtop slabtop实时显示详细的内核板条缓存信息.它显示按所列排序条件之一排序的顶级缓存的列表.它还会显示一个统计信息头,其中填充了板坯层信息. 此命令的适用范围:RedHat.RHEL. ...
- Activiti工作流引擎使用详解(一)
一.IDEA安装activiti插件 在插件库中查找actiBPM,安装该插件,如果找不到该插件,请到插件库中下载该包手动安装,插件地址 http://plugins.jetbrains.com/pl ...
- Oracle SQL中join方式总结
在ORACLE数据库中,表与表之间的SQL JOIN方式有多种(不仅表与表,还可以表与视图.物化视图等联结).SQL JOIN其实是一个逻辑概念,像NEST LOOP JOIN. HASH JOIN等 ...
- 1 - 基于ELK的ElasticSearch 7.8.x 技术整理 - 基础语法篇 - 更新完毕
准备工作 0.什么是ElasticSearch?它和Lucene以及solr的关系是什么? 这些是自己的知识获取能力,自行百度百科 1.下载ElasticSearch的window版,linux版后续 ...