<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滑动操作的更多相关文章

  1. iOS之UITableView带滑动操作菜单的Cell

    制作一个可以滑动操作的 Table View Cell 本文翻译自 http://www.raywenderlich.com/62435/make-swipeable-table-view-cell- ...

  2. Android 屏蔽ScrollView滑动操作

    屏蔽ScrollView滑动操作,如下,会用到ViewConfiguration这个类,这个类可以获取到用户是否为滑动操作的临界值. 代码如下: package com.xx.uikit.view; ...

  3. appium滑动操作(向上、向下、向左、向右)

    appium滑动操作(向上滑动.向下滑动.向左滑动.向右滑动) 测试app:今日头条apk 测试设备:夜游神模拟器 代码如下: 先用x.y获取当前的width和height def getSize() ...

  4. 微信小程序开发-滑动操作

    在实际应用中,当某种手势被触发后,在用户没有放开鼠标或手指前,会一直识别为该手势.比如当用户触发左滑手势后,这时再向下滑动,仍要按照左滑手势来处理. 可以定义一个标记来记录第一次识别到的手势,如果已识 ...

  5. Appium-Java滑动操作

    Java滑动操作,通常可以直接使用API中AndroidDriver类中的swipe方法,直接进行调用 swipe(int startx, int starty, int endx, int endy ...

  6. 制作一个可以滑动操作的 Table View Cell

    本文转载至 https://github.com/nixzhu/dev-blog Apple 通过 iOS 7 的邮件(Mail)应用介绍了一种新的用户界面方案——向左滑动以显示一个有着多个操作的菜单 ...

  7. python+Appium自动化:app滑动操作swipe

    swipe Appium使用滑动操作用到了swipe方法,定义如下: swipe(self, start_x, start_y, end_x, end_y, duration=None) 从一个点滑动 ...

  8. Android SwipeActionAdapter结合Pinnedheaderlistview实现复杂列表的左右滑动操作

    在上一篇博客<Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作>里,已经介绍了利用SwipeActionAdapter来左右滑动操作列表: 然,有时 ...

  9. Android 使用SwipeActionAdapter开源库实现简单列表的左右滑动操作

    我们做listview左右滑动操作时,一般中情况下,都是像QQ那样,左滑弹出操作菜单(删除.编辑),然后选择菜单操作: 这样的效果不可谓不好,算是非常经典. 另外,有少数的APP,尤其是任务管理类的A ...

随机推荐

  1. 实时数仓(二):DWD层-数据处理

    目录 实时数仓(二):DWD层-数据处理 1.数据源 2.用户行为日志 2.1开发环境搭建 1)包结构 2)pom.xml 3)MykafkaUtil.java 4)log4j.properties ...

  2. Apache2配置文件解读

    每次碰到都不知道具体的作用,所以来分析一下 配置文件结构 apache2在启动的时候自动读取/etc/apache2/apache2.conf文件的配置信息,不同的配置项按功能分布在不同的文件中,然后 ...

  3. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  4. 【leetcode】917. Reverse Only Letters(双指针)

    Given a string s, reverse the string according to the following rules: All the characters that are n ...

  5. WebService学习总览

    [1]WebService简介 https://blog.csdn.net/xtayfjpk/article/details/12256663 [2]CXF中Web服务请求处理流程 https://b ...

  6. RecyclerView实现侧滑删除、置顶、滑动

    1.首先在build.gradle里添加 compile 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.2.1' 2.设置recyclerView的item布 ...

  7. Linux基础命令---slabtop

    slabtop slabtop实时显示详细的内核板条缓存信息.它显示按所列排序条件之一排序的顶级缓存的列表.它还会显示一个统计信息头,其中填充了板坯层信息. 此命令的适用范围:RedHat.RHEL. ...

  8. Activiti工作流引擎使用详解(一)

    一.IDEA安装activiti插件 在插件库中查找actiBPM,安装该插件,如果找不到该插件,请到插件库中下载该包手动安装,插件地址 http://plugins.jetbrains.com/pl ...

  9. Oracle SQL中join方式总结

    在ORACLE数据库中,表与表之间的SQL JOIN方式有多种(不仅表与表,还可以表与视图.物化视图等联结).SQL JOIN其实是一个逻辑概念,像NEST LOOP JOIN. HASH JOIN等 ...

  10. 1 - 基于ELK的ElasticSearch 7.8.x 技术整理 - 基础语法篇 - 更新完毕

    准备工作 0.什么是ElasticSearch?它和Lucene以及solr的关系是什么? 这些是自己的知识获取能力,自行百度百科 1.下载ElasticSearch的window版,linux版后续 ...