微信小程序~触摸相关事件(拖拽操作、手势识别、多点触控)
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
拖拽操作案例1:
注意按钮拖出屏幕边缘处理
<view id="id" bindtouchmove="handletouchmove" class='demo' style='top:{{ballTop}}px; left: {{ballLeft}}px'></view>
page{background:red}
.demo{ width:60px; height:60px; background:#545345;box-shadow:2px 2px 10px #AAA;border-radius: 20px;position: absolute; }
Page({
data: {
ballTop: 0,
ballLeft: 0,
screenHeight: 0,
screenWidth: 0
},
onLoad: function () {
// 一是会将按钮拖出屏幕边缘,
// 二是按钮始终在鼠标右下方。
// 获取屏幕宽高
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});
},
handletouchmove: function (event) {
// console.log(event)
let pageX = event.touches[0].pageX;
let pageY = event.touches[0].pageY;
//屏幕边界判断 中心点位置
if (pageX < 30 || pageY < 30)
return;
if (pageX > this.data.screenWidth - 30)
return;
if (pageY > this.data.screenHeight - 30)
return; //左上角位置
this.setData({
ballTop: event.touches[0].pageY - 30,
ballLeft: event.touches[0].pageX - 30,
}); }
})
手势识别案例2:
<view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove"
style="width:100%px;height:80px;line-height:80px;color:#fff;text-align:center; background:red">
{{text}}
</view>
Page({
data: {
lastX: 0,
lastY: 0,
text: "没有滑动",
},
handletouchmove: function (event) {
// console.log(event)
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 = "向左滑动"
else if (tx > 0)
text = "向右滑动"
}
else {
//上下方向滑动
if (ty < 0)
text = "向上滑动"
else if (ty > 0)
text = "向下滑动"
} //将当前坐标进行保存以进行下一次计算
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
}
})
多点触控案例3:
根据相关功能可进行通过编辑器-远程调试,如手指张开的操作,可以分别判断两个触摸点的移动方向,比如靠左的触摸点向左滑动,靠右的触摸点向右滑动,即可判定为手指张开操作。
微信小程序~触摸相关事件(拖拽操作、手势识别、多点触控)的更多相关文章
- 微信小程序 -- 基于 movable-view 实现拖拽排序
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-vie ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- Android 单指触控拖拽,两指触控缩放
import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
随机推荐
- 【Android开发】范例1-绘制Android的机器人
下面这个实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人的小实例. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/ma ...
- Codeforces Round #345 (Div. 2) C (multiset+pair )
C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...
- noip模拟赛 helloworld
分析:对于第一个点,答案为26^n - 25^n,这个很好想.另外30%的点因为n <= 5,所以可以直接暴力搜索. 数学方法不是很好处理,考虑dp,设f[i][j]为前i位匹配到危险串第j位的 ...
- HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
在提交表单或者执行某个事件之后,如果需要重置表单(即清空表单里的数据) 可以执行下面代码来完成 方式一: self.location.href="userController.do?goAd ...
- [洛谷P4768] [NOI2018]归程 (kruskal重构树模板讲解)
洛谷题目链接:[NOI2018]归程 因为题面复制过来有点炸格式,所以要看题目就点一下链接吧\(qwq\) 题意: 在一张无向图上,每一条边都有一个长度和海拔高度,小\(Y\)的家在\(1\)节点,并 ...
- PowerDesigner16 修改表或表的字段Name的时候不让Code不自动跟着变
在修改表或表的字段Name的时候不让Code不自动跟着变,设置如下: tools-> General Options-> Dialog 去掉勾选 Name To Code mirror ...
- intellj idea点击导航栏打开的一个类,怎么才能定位到类的目录
- NGINX: 返回大 JSON 数据不完整的问题
说明: 内容全部来自 [ CSDN 金玮良 ] nginx 返回数据不完整的问题 当nginx 遇到大数据流时,会把数据先放在自己的缓冲区,然后一并发给客户端. 那如果这个结论成立, 那一次请求的数据 ...
- Spring 路由地址的基本使用
1.下面是spring的使用基本框架连接 https://www.cnblogs.com/HD/p/4103239.html
- hdu 1087 Super Jumping! Jumping! Jumping!(动态规划DP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1087 Super Jumping! Jumping! Jumping! Time Limit: 200 ...