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

Page({
data: {
lastX: 0,
lastY: 0,
text : "没有滑动",
currentGesture: 0,
},
handletouchmove: function(event) {
console.log(event)
if (this.data.currentGesture != 0){
return
}
let currentX = event.touches[0].pageX
let currentY = event.touches[0].pageY
let tx = currentX - this.data.lastX
let ty = currentY - this.data.lastY
let text = ""
//左右方向滑动
if (Math.abs(tx) > Math.abs(ty)) {
if (tx < 0) {
text = "向左滑动"
this.data.currentGesture = 1
}
else if (tx > 0) {
text = "向右滑动"
this.data.currentGesture = 2
} }
//上下方向滑动
else {
if (ty < 0){
text = "向上滑动"
this.data.currentGesture = 3 }
else if (ty > 0) {
text = "向下滑动"
this.data.currentGesture = 4
} } //将当前坐标进行保存以进行下一次计算
this.data.lastX = currentX
this.data.lastY = currentY
this.setData({
text : text,
});
}, handletouchtart:function(event) {
console.log(event)
this.data.lastX = event.touches[0].pageX
this.data.lastY = event.touches[0].pageY
},
handletouchend:function(event) {
console.log(event)
this.data.currentGesture = 0
this.setData({
text : "没有滑动",
});
},
})

微信小程序开发-滑动操作的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 微信小程序开发心得--动画机制

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...

  3. 微信小程序开发(5) 2048游戏

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...

  4. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  6. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  7. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  8. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  9. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

随机推荐

  1. (转)java并发编程--Executor框架

    本文转自https://www.cnblogs.com/MOBIN/p/5436482.html java并发编程--Executor框架 只要用到线程,就可以使用executor.,在开发中如果需要 ...

  2. TWebSocketClient

    TWebSocketClient 支持WEBSOCKET通讯协议的客户端控件. 连接WEBSOCKET SERVER的代码演示: WebSocketClient1.HostName := '88.19 ...

  3. C#编程(十七)----------Object类

    Object类 它是.NET Framework 中所有类的最终基类:它是类型层次结构的根.也就是说所有的类都拥有object类的方法,并能重写,调用. object的构造函数:public Obje ...

  4. WebLogic清理缓存

    如果发布到weblogic的工程,登录发现还是原来的代码错误,可尝试清理weblogic缓存: 1.在weblogic控制台中停止应用,删除部署的工程 2.登录weblogic服务器,删除以下目录中的 ...

  5. 【spring cloud】【spring boot】网管服务-->配置文件添加endpoints.enabled = false,SpringBoot应用监控Actuator使用的安全隐患

    转载:https://xz.aliyun.com/t/2233 ==================================================================== ...

  6. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  7. OPTAUTH 两步验证详解

    先贴图: 在对外网开放的后台管理系统中,使用静态口令进行身份验证可能会存在如下问题: (1) 为了便于记忆,用户多选择有特征作为密码,所有静态口令相比动态口令而言,容易被猜测和破解: (2) 黑客可以 ...

  8. 黑帆第一季/全集Black Sails迅雷下载

    黑帆 第一季 Black Sails Season 1 (2014)本季看点:剧集将会是英国小说家罗伯特·路易斯·史蒂文森(Robert Louis Stevenson)经典的海盗故事<金银岛& ...

  9. JAVA开发中文乱码的几个解决方案

    一:html乱码或者引入的JS乱码 1:第一步,text file encoding 首先确保文件的保存格式要UTF-8,如在eclipse中,要在文件上点属性,确保这里选择UTF-8 注意,在ecl ...

  10. 用make编译openCV报错:ts_gtest.cpp:(.text._ZN7testing8internal2RED2Ev+0xf): undefined reference to 'regfreeA'

    解决方案: the cause is the google tests is looking for the generic regex.h but cmake used the regex.h fr ...