<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小程序滑动事件的更多相关文章

  1. 「小程序JAVA实战」 小程序的事件(11)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/ 我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击 ...

  2. uni与小程序,vue的区别

    标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...

  3. 微信小程序滑动选择器

    实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange ...

  4. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  5. 微信小程序的事件

    事件,视图层到逻辑层的一种通讯方式,或者将用户的行为返回到逻辑层,当我们在组件绑定事件之后,当我们触发事件,就会执行逻辑层绑定的事件,处理回调函数,当页面的事件触发之后 页面上元素一些额外事件,通过事 ...

  6. 小程序onShow事件获取options方法

    微信小程序 onShow() 事件 onShow() 事件不接受参数,因此无法获取页面 url 传递过来的参数,只有 onLoad() 事件可以. onShow(options){ console.l ...

  7. Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解

    Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...

  8. Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)

    Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...

  9. 小程序 onReachBottom 事件快速滑动时不触发的bug

    一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...

随机推荐

  1. 电子书及阅读器Demo

    电子书阅读器(Kindle,电子纸技术.LCD.电子墨水技术等: 亚马逊/当当网站)  电子书产业可分5大环节:内容供应商.数字格式制作商.内容流通服务平台.传输平台以及终端阅读器产品. 全球电子书市 ...

  2. typeof方法重写(区分数组对象)

    为什么要重写typeof方法? typeof 可以准确的判断除object以外的基础数据类型,但不能区分object类型的具体类型,比如 Array .Date.NULL.NaN 以及自定义类. 观察 ...

  3. CentOS7.3下载地址

    CentOS 7.3,是CentOS-7系列的第四个发行版本,官方版本号为7.3.1611.该版本的安装映像只有 64 位,具体的安装映像有以下几种: DVD版 推荐(迅雷下载):http://arc ...

  4. Java Juc学习笔记

    Java JUC 简介 在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括 ...

  5. 2019年5月6日A股两百点暴跌行情思考

    原因:特朗普推特发布贸易战消息 盘面:跳空低开,单边下跌,上证指数最大跌幅200点,收盘千股跌停 操作:开盘加仓,盘中加仓,尾盘满仓 总结: 特大黑天鹅事件爆发引发大盘暴跌时,后续必将迎来一个反弹机会 ...

  6. SpringBoot Controller找不到视图路径

    在启动类加注解@ComponentScan("com.controller")即可,括号里表示Controller所在包名. 参考:https://blog.csdn.net/ji ...

  7. 设计模式课程 设计模式精讲 15-2 桥接模式Coding

    1 代码演练 1.1 代码演练1 1.2 代码演练2   1 代码演练 1.1 代码演练1 需求: 打印出从银行获取的账号类 优点: a 假如我只用用一个银行接口 去获取账号的内容,银行实现类要有定期 ...

  8. WEB, Flask - Session&Cookie

    参考: https://blog.csdn.net/nunchakushuang/article/details/74652877 http://portal.xiaoxiangzi.com/Prog ...

  9. 9.ActiveMQ

    1. ActiveMQ 安装 下载并安装ActiveMQ服务器端(1.1):从http://activemq.apache.org/download.html下载最新的ActiveMQ(1.2):直接 ...

  10. 笔记||Pyhton3进阶之多线程原理

    # 多线程 # 一个进程相当于一个或多个线程 # 当没有多线程编程时,一个进程也是一个主线程 # 但有多线程编程时,一个进程包含多个线程,包括主线程 # 使用线程 可以实现程序的并发 # python ...