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

在实际应用中，当某种手势被触发后，在用户没有放开鼠标或手指前，会一直识别为该手势。比如当用户触发左滑手势后，这时再向下滑动，仍要按照左滑手势来处理。
可以定义一个标记来记录第一次识别到的手势，如果已识别出手势，后续的滑动操作就可以忽略，直到用户放开鼠标或手指。放开鼠标或手指操作可以通过绑定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].pageXlet currentY = event.touches[0].pageYlet tx = currentX - this.data.lastXlet ty = currentY - this.data.lastYlet 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 = currentXthis.data.lastY = currentYthis.setData({text : text,});},handletouchtart:function(event) { console.log(event)this.data.lastX = event.touches[0].pageXthis.data.lastY = event.touches[0].pageY},handletouchend:function(event) {console.log(event)this.data.currentGesture = 0this.setData({text : "没有滑动",});},
})

微信小程序开发-滑动操作相关推荐

微信小程序实现滑动操作
目录前言实现过程前言本文使用动画组件wx.createAnimation来实现滑动操作: 1. 左滑动显示操作项区域: 2. 点击操作项触发相应方法: 3. 右滑动和点击行收起操作项: 4. ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp手写_uni-app框架纯手写微信小程序开发左侧滑动菜单
原来到最后才发现有些东西,没有就真的没有.不行,就真的不行唠叨一会在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香),在大佬的指引下学会自己去写 ...
微信小程序开发之『侧边栏滑动』特效
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序开发学习4（视图与逻辑）
微信小程序开发学习4(视图与逻辑) 1.学习目标能够知道如何实现页面之间的导航跳转能够知道如何实现下拉刷新效果能够知道如何实现上拉加载更多效果能够知道小程序中常用的生命周期函数 2.页面导航 ...
ready等方法微信小程序_微信小程序开发一些经验
对于微信小程序开发入门,还是比较简单的,只需要具备基本的css+js知识就可以了,成本比较低. 写了小程序和RN之后,有一种原生很笨重的感觉,就是小程序或者是RN等这些新的开发方式在效率上面真的有比较 ...
七天学习微信小程序开发（一）—— 学习笔记
文章目录前言目标第一天 -- 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml) 常用样式(wxss) 界面布局的技术任务第二天 -- 深度学习微信前端编写(一) 程序底部 ...

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

微信小程序开发-滑动操作相关推荐

最新文章

热门文章