微信小程序触屏事件_上划下划事件

一、微信小程序触屏事件

bindtouchstart:手指触摸动作开始

bindtouchmove:手指触摸后移动

bindend:手指触摸动作结束

属性类型说明
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
Touch 对象
属性类型说明
identifierNumber触摸点的标识符
pageX, pageYNumber距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX, clientYNumber距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴

二、自定义实现上划,下划处理

原理:触点从屏幕滑动距离,超过指定像素大小触发处理。

从Y轴方向判断,超出距离,上划下划

从X轴方向判断,超出距离,作划右划

wxml代码:

<view class="block" bind:touchstart="startEvent" bind:touchmove="moveEvent" data-id="10"><view class="blue"><view>X:{{pageX}}</view><view>Y:{{pageY}}</view></view><view class="green"><view>X:{{pageX2}}</view><view>Y:{{pageY2}}</view></view><!-- <view class="inblock" bind:touchstart="startEvent" data-id="11"></view>-->
</view>

js:

  startEvent(e) {var touches = e.touches;var touch = touches[0];var pageX = touch.pageX;var pageY = touch.pageY;this.setData({pageX: pageX,pageY})},moveEvent(e) {var touches = e.touches;var touch = touches[0];var pageX2 = touch.pageX;var pageY2 = touch.pageY;var pageX = this.data.pageX;var pageY = this.data.pageY;this.setData({pageX2,pageY2})//判断是否上划,是否下滑  50像素为参考if ((pageY2 - pageY) > 50) {console.info('下滑');}if ((pageY2 - pageY) < -50) {console.info('上滑动');}},

更多:

微信小程序事件绑定

微信小程序实现打分效果代码整理

微信小程序分享、转发朋友、分享朋友圈使用整理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/505663.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Excel】【正则】判断手机号是否正确

发现导出的手机号&#xff0c;有部分存在问题&#xff0c;故想直接通过excel做正则的判断 先说结论&#xff1a;通过VBA实现了正则函数的嵌入&#xff0c;但实际效率非常低下&#xff0c;80万的数据跑了半小时&#xff08;T14 十代i7&#xff09; 参考文章&#xff1a;正则表…

点云数据结构化与体素化理论学习

一、PCD点云数据存储格式的进一步认识 &#xff08;一&#xff09;PCD点云存储格式相较于其它存储格式&#xff08;如PLY、STL、OBJ、X3D等&#xff09;的优势[1] &#xff08;1&#xff09;具有存储和处理有组织的点云数据集的能力&#xff0c;这对于实时应用和增强现实及机器…

主网NFT的发布合约

1.什么是nft? NFT:Non-fungible-token 非同质化货币 2.新建suimove项目 使用sui move new 项目名命令新建sui move项目 sui move new nft_qyx项目结构如下: 3.写nft合约 module qyx123::nft{use sui::object::{Self, UID};use sui::transfer;use sui::tx_context::{Sel…

Elasticsearch搜索引擎

目录 初识elasticsearch 了解ES 什么是elasticsearch elasticsearch的发展 搜索引擎技术排名&#xff1a; 总结 倒排索引 正向索引和倒排索引 正向索引 倒排索引 总结 es的一些概念 文档 索引 概念对比 架构 总结 安装es&#xff0c;kibana 安装es 安装kiba…

Javaweb之SpringBootWeb案例之自动配置的原理分析的详细解析

3.2.3 原理分析 3.2.3.1 源码跟踪 前面我们讲解了在项目当中引入第三方依赖之后&#xff0c;如何加载第三方依赖中定义好的bean对象以及配置类&#xff0c;从而完成自动配置操作。那下面我们通过源码跟踪的形式来剖析下SpringBoot底层到底是如何完成自动配置的。 源码跟踪技巧…

技术阅读周刊第十四期:常用的 Git 配置

技术阅读周刊&#xff0c;每周更新。 历史更新 20231122&#xff1a;第十一期20231129&#xff1a;第十二期20240105&#xff1a;第十三期&#xff1a;一些提高生产力的终端命令20240112&#xff1a;第十四期&#xff1a;Golang 作者 Rob Pike 在 GopherConAU 上的分享 How I w…

第19章-IPv6基础

1. IPv4的缺陷 2. IPv6的优势 3. 地址格式 3.1 格式 3.2 长度 4. 地址书写压缩 4.1 段内前导0压缩 4.2 全0段压缩 4.3 例子1 4.4 例子 5. 网段划分 5.1 前缀 5.2 接口标识符 5.3 前缀长度 5.4 地址规模分类 6. 地址分类 6.1 单播地址 6.2 组播地址 6.3 任播地址 6.4 例子 …

计算机网络(4)----局域网与广域网

目录 1.局域网 (1)局域网拓扑结构 (2)局域网的传输介质 (3)局域网介质访问控制方法 (4)局域网的分类 (5)IEEE 802标准 (6)MAC子层与LLC子层 (7)常用的局域网技术---以太网 (8)以太网传输介质与拓扑结构的发展 (9)常用的以太网---10BASE-T以太网 (10)适配器与MAC地址…

SMBGhost漏洞技术分析与防御方案

事件分析 最近国内外各安全厂商都发布了SMBGhost(CVE-2020-0796)漏洞的预警报告和分析报告&#xff0c;笔者利用周末休息时间也研究了一下&#xff0c;就算是做一个笔记了&#xff0c;分享给大家一起学习下&#xff0c;目前外面研究的POC大部分是通过SMB压缩数据包长度整数溢出…

在github的README.md中插入视频;在github的README.md中添加gif演示动画

最近需要再github中上传项目的源代码&#xff0c;应导师的要求&#xff0c;需要再README中加入对实验视频的展示&#xff0c;但是github的README.md其实就是一个markdown文件&#xff0c;据我的理解这个文件里应该无法直接插入视频吧&#xff1f;&#xff08;如果后续有办法直接…

BUGKU 网站被黑

打开环境&#xff0c;什么都没发现&#xff0c;使用蚁剑扫描一下&#xff0c;发现shell.php&#xff0c;打开 使用BP抓包&#xff0c;进行爆破 得到密码&#xff1a;hack 进去得到flag

嵌入式中汇编语言的基本实现

大家好&#xff0c;今天给大家分享&#xff0c;GNU汇编的语法。 第一&#xff1a;汇编简介 GNU 汇编语法适用于所有的架构&#xff0c;并不是 ARM 独享的&#xff0c;GNU 汇编由一系列的语句组成&#xff0c; 每行一条语句&#xff0c;每条语句有三个可选部分&#xff0c;如下…