微信小程序开发-滑动操作
在实际应用中,当某种手势被触发后,在用户没有放开鼠标或手指前,会一直识别为该手势。比如当用户触发左滑手势后,这时再向下滑动,仍要按照左滑手势来处理。
可以定义一个标记来记录第一次识别到的手势,如果已识别出手势,后续的滑动操作就可以忽略,直到用户放开鼠标或手指。放开鼠标或手指操作可以通过绑定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 : "没有滑动",
});
},
})
微信小程序开发-滑动操作的更多相关文章
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序开发心得--动画机制
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...
- 微信小程序开发(5) 2048游戏
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
随机推荐
- 在Visual Studio中使用用例图描述参与者与用例的关系
在"在Visual Studio中使用用例图描述系统与参与者间的关系"中,使用用例图表示参与者与系统的关系,本篇体验参与者与用例(参与者要做的事情)的关系. 首先创建有关Custo ...
- java数据结构 栈stack
栈(Stack) 栈(Stack)实现了一个后进先出(LIFO)的数据结构. 你可以把栈理解为对象的垂直分布的栈,当你添加一个新元素时,就将新元素放在其他元素的顶部. 当你从栈中取元素的时候,就从栈顶 ...
- log4j deadlock
用了这么久的Log4j这次倒下了,而且官方也还没有给出解决方案. 描述:tomcat 经过一天多时间的访问,出现了hang ,使用 Jstack 查看堆栈后,发现现成 blocked ,主要是 Log ...
- Ubuntu下 ssh : connect to host localhost port 22:Connection refused
Ubuntu下测试ssh时使用ssh localhost 命令,出现错误提示connect to host localhost port 22:Connection refused 造成这个错误的原因 ...
- SPClaimsUtility.AuthenticateFormsUser 方法的一个小问题
前言 最近,开启了Form认证,发现Form账号前面加空格,或者后面加空格都可以登录站点,但是提示未共享. 解决方法 后来bing了很多帖子,发现大家都遇到过类似的问题,问题是由于SPClaimsUt ...
- crm操作产品实体
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; /// <summary> ...
- .NetCore中EFCore for MySql整理(二)
一.简介 EF Core for MySql的官方版本MySql.Data.EntityFrameworkCore 目前正是版已经可用当前版本v6.10,对于以前的预览版参考:http://www.c ...
- Netty精粹之JAVA NIO开发需要知道的
学习Netty框架以及相关源码也有一小段时间了,恰逢今天除夕,写篇文章总结一下.Netty是个高效的JAVA NIO框架,总体框架基于异步非阻塞的设计,基于网络IO事件驱动,主要贡献在于可以让用户基于 ...
- [转]Nginx+mysql+php-fpm负载均衡配置实例
转 : http://www.jbxue.com/article/7923.html 介绍一个nginx.mysql.php-fpm环境下配置负载均衡的例子,有需要的朋友,可以参考下. 系统环境如下: ...
- 11.2.0.3 RAC(VCS)节点crash以及hang的问题分析
昨天某个客户的一套双节RAC当中一个节点crash,同一时候最后导致另外一个节点也hang住,仅仅能shutdown abort. 且出现shutdown abort实例之后,还有部分进程无法通过ki ...