微信小程序开发-滑动操作
在实际应用中,当某种手势被触发后,在用户没有放开鼠标或手指前,会一直识别为该手势。比如当用户触发左滑手势后,这时再向下滑动,仍要按照左滑手势来处理。
可以定义一个标记来记录第一次识别到的手势,如果已识别出手势,后续的滑动操作就可以忽略,直到用户放开鼠标或手指。放开鼠标或手指操作可以通过绑定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日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
随机推荐
- self.xxx = nil 可以等效于[_xxx release] _xxx= nil 么
如果属性是copy.retain的话是等价的.如下: - (void)setXXX:(NSString*)axx { if (_xxx != axx) { [_xxx release]; _xxx = ...
- libcurl下载文件
一.初始化 CURL *pHandler = curl_easy_init(); 二.设置请求参数: 调用curl_easy_setopt方法,设置选项 curl_easy_setopt(pHan ...
- 多个类定义attr属性重复的问题:Attribute "xxx" has already been defined
有时候做自定义控件时就会遇到命名冲突,改变有冲突的名字自然是最直接有效的方式,但是感觉很傻.我搜了下别人的解决方案,觉得很值得借鉴.就是把重名的属性,独立出来写一下,然后在定义时直接写属性名字即可. ...
- 使用自定义的Adapter来设置ListView的内容
这里主要是学习的Adapter的机制 MainActivity.java package com.kale.listview; import android.app.Activity; import ...
- EditText 限制输入,自定义样式,监听输入的字符,自动换行
自动获取焦点 <!-- 添加:<requestFocus /> 会自动获取焦点 --> <EditText android:layout_width="matc ...
- Spring常用表单验证注解
下面是主要的验证注解及说明: 注解 适用的数据类型 说明 @AssertFalse Boolean, boolean 验证注解的元素值是false @AssertTrue Boolean, boole ...
- Curl操作Elasticsearch的常用方法
Elasticsearch对于文档操作,提供了以下几种API,本文就说明如何使用curl方式来调用这些API. API种类 单文档操作API 1.* Index API 索引文档 * 为文档创建索引 ...
- java8 快速入门 lambda表达式 Java8 lambda表达式10个示例
本文由 ImportNew - lemeilleur 翻译自 javarevisited.欢迎加入翻译小组.转载请见文末要求. Java 8 刚于几周前发布,日期是2014年3月18日,这次开创性的发 ...
- HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\aspnet_state\Parameters\AllowRemoteConnection
ylbtech-Error-WebForm: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\aspnet_state\Parameters\ ...
- 附9 elasticsearch-curator + Linux定时任务
官网教程入口:https://www.elastic.co/guide/en/elasticsearch/client/curator/current/index.html 一.下载安装 下载:sud ...