小程序监听屏幕滑动事件
时间:2022-07-28
本文章向大家介绍小程序监听屏幕滑动事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小程序监听屏幕滑动事件
功能设计背景
- 小程序页面点击事件的坐标系是以左下角为原点的直角坐标系。
- 微信小程序提供
bindtouchstart
和bindtouchend
接口用于监听触点的变化。
功能实现
1.在你需要监听的块外增加监听遮罩层,包含待监听块在内
<view bindtouchstart="touchStart" bindtouchend="touchEnd">
<!--待监听功能模块-->
</view>
2.根据触点的起始位置和终止位置计算滑动方向(在data中配置touchx
和touchy
数值)
touchStart(e) {
console.log(e)
var that = this;
that.setData({
touchx: e.changedTouches[0].clientX,
touchy: e.changedTouches[0].clientY
})
},
touchEnd(e) {
console.log(e)
var that = this;
let x = e.changedTouches[0].clientX;
let y = e.changedTouches[0].clientY;
let turn = "";
if (x - that.data.touchx > 50 && Math.abs(y - that.data.touchy) < 50) { //右滑
turn = "right";
} else if (x - that.data.touchx < -50 && Math.abs(y - that.data.touchy) < 50) { //左滑
turn = "left";
}
if(y - that.data.touchy > 50 && Math.abs(x - that.data.touchx) < 50){ //下滑
turn = "down";
}else if(y - that.data.touchy < -50 && Math.abs(x - that.data.touchx) < 50){ //上滑
turn="up";
}
//根据方向进行操作
if(turn == 'down'){
//下滑触发操作
}
},
- Visual Studio Code 代理设置
- 温故而知新:设计模式之工厂模式(Factory)
- 通过Jexus 部署 dotnetcore版本MusicStore 示例程序
- jquery.mobile手机网页简要
- 跟张志东深聊腾讯的“进化力”
- 详解微信小程序如何实现流程进度功能
- silverlight:如何在图片上挖个洞?
- .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门
- mysqldump数据导出问题和客户端授权后连接失败问题
- Android置底一个View后运行报错
- 温故而知新:设计模式之抽象工厂(AbstractFactory)
- mysql操作命令梳理(1)-索引
- Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)
- centos6.5虚拟机安装后,没有iptables配置文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ZeroLogon(CVE-2020-1472) 分析与狩猎
- 什么是数字资产?
- 我要偷偷的学Python,然后惊呆所有人(第一天)
- Python 中的上下文管理
- 我是如何阅读JDK源码的?
- Docker以root身份登录到容器
- SOAPUI访问WEBSERVICE案例
- 编译安装nginx
- 磁盘高可用解决方案(DBA).md
- Python 3.7 + HttpRunner 初探
- 数据库PostrageSQL-服务器配置(复制)
- 高可用服务解决方案(DBA).md
- dotnet 使用 Interlocked 实现一个无锁的快速无序仅写集合
- 利用Python将gff3转换成gtf格式
- 单细胞DoHeatmap画热图标签出界