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

一、微信小程序触屏事件

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.rhkb.cn/news/267317.html

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

相关文章

《HelloGitHub》第 95 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、Java、Go、C/C、Swift...让你在短时间内…

DDR5内存相比DDR4内存的优势和区别?选择哪一个服务器内存配置能避免丢包和延迟高?

根据幻兽帕鲁服务器的实际案例分析&#xff0c;选择合适的DDR4与DDR5内存大小以避免丢包和延迟高&#xff0c;需要考虑以下几个方面&#xff1a; 性能与延迟&#xff1a;DDR5内存相比DDR4在传输速率、带宽、工作电压等方面都有显著提升&#xff0c;但同时也伴随着更高的延迟。D…

Javaweb之SpringBootWeb案例之自动配置的两种常见方案的详细解析

3.2.2.2 方案一 ComponentScan组件扫描 SpringBootApplication ComponentScan({"com.itheima","com.example"}) //指定要扫描的包 public class SpringbootWebConfig2Application {public static void main(String[] args) {SpringApplication.run(Sprin…

Wireless LAN演进整理以及STA与AP之间的关联行为

一、WLAN standard WLAN标准也是由电机电子工程师学会 (IEEE, Electrical and Electronics Engineers)组织制定的&#xff0c;WLAN标准统称为802.11 二、802.11传输标准 IEEE标准 名称 年份 频道 最高传输速率 调变方式 802.11 WIFI 0 1997 2.4 GHz 2 Mbps DSSS 8…

STM32------分析GPIO寄存器

一、初始LED原理图 共阴极led LED发光二极管&#xff0c;需要有电流通过才能点亮&#xff0c;当有电压差就会产生电流 二极管两端的电压差超过2.7v就会有电流通过 电阻的作用 由于公式IV/R 不加电阻容易造成瞬间电流无穷大 发光二极管工作电流为10-20MA 3.3v / 1kΩ 3.…

如何在群晖Docker运行本地聊天机器人并结合内网穿透发布到公网访问

文章目录 1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址 随着ChatGPT 和open Sora 的热度剧增,大语言模型时代,开启了AI新篇章,大语言模型的应用非常广泛&#xff0c;包括聊天机…

获取linuxIP、内存、cpu、磁盘IO等信息的Shell脚本及其讲解

shell基础知识 1.grep grep是一个在Unix和Unix-like系统上使用的命令行工具&#xff0c;用于在文本文件中搜索匹配指定模式的行。它的名字来自于"global regular expression print"&#xff08;全局正则表达式打印&#xff09;的缩写。grep的基本用法是通过指定一个…

Redis之十:Spring Data Redis --- CrudRepository方式

SpringData Redis CrudRepository方式 Spring Data Redis 的 CrudRepository 是 Spring Data 框架中用于提供基础 CRUD&#xff08;创建、读取、更新和删除&#xff09;操作的一个接口。在与 Redis 集成时&#xff0c;尽管 Redis 是一个键值存储系统&#xff0c;并没有像关系型…

iOS卡顿原因与优化

iOS卡顿原因与优化 1. 卡顿简介 卡顿&#xff1a; 指用户在使用过程中出现了一段时间的阻塞&#xff0c;使得用户在这一段时间内无法进行操作&#xff0c;屏幕上的内容也没有任何的变化。 卡顿作为App的重要性能指标&#xff0c;不仅影响着用户体验&#xff0c;更关系到用户留…

零拷贝技术深入分析

一、零拷贝 在前面的文章“深浅拷贝、COW及零拷贝”中对零拷贝进行过分析&#xff0c;但没有举例子&#xff0c;也没有深入进行展开分析。本文将结合实际的例程对零拷贝进行更深入的分析和说明。 在传统的IO操作中&#xff0c;以文件通过网络传输为例 &#xff0c;一般会经历以…

深度学习 精选笔记(4)线性神经网络-交叉熵回归与Softmax 回归

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

并查集(Disjoint Set)

目录 1.定义 2.初始化 3.查找 4.合并 4.1.按秩合并&#xff08;启发式合并&#xff09; 5.例题 题目描述 输入格式 输出格式 输入输出样例 说明/提示 1.定义 并查集&#xff0c;也称为不相交集合数据结构&#xff0c;是一种用于管理元素分组以及查找元素所属组的数…

MWC 2024丨世界移动通信大会圆满结束,美格智能5G-A、端侧AI解决方案掀热潮

2月26日—29日&#xff0c;全球瞩目的2024世界移动通信大会&#xff08;MWC&#xff09;在西班牙巴塞罗那隆重举办。本届MWC以“未来先行”为主题&#xff0c;围绕“超越5G”、“智联万物”、“AI人性化”等话题展开&#xff0c;吸引了全球2400多家电信运营商、通信设备和终端制…

亿道信息新品EM-T195轻薄型工业平板,隆重登场!

EM-T195是一款轻巧但坚固的平板电脑&#xff0c;仅 650克重、10.5mm毫米厚&#xff0c;即使没有额外的便携配件进行辅助&#xff0c;您也可以轻松将其长时间随身携带。耐用性外壳完全密封&#xff0c;防尘防潮&#xff1b;出色的坚固性和可靠性&#xff0c;使T195天生适合在苛刻…

政府采购标书制作的要点解析

导语&#xff1a;政府采购是政府为满足公共利益&#xff0c;按照法定程序和标准&#xff0c;通过招标、竞争性谈判等方式&#xff0c;购买商品、工程和服务的行为。标书作为政府采购活动中的重要文件&#xff0c;其制作质量直接影响到项目的顺利进行。本文将围绕政府采购标书制…

导览系统厂家|景区电子导览|手绘地图|AR导览|语音导览系统

随着元宇宙、VR、AR等新技术的快速发展&#xff0c;旅游服务也更加多元化、智能化。景区导览系统作为旅游服务的重要组成部分&#xff0c;其形式更加多元化智能化。智能导览系统作为一种新的服务方式&#xff0c;能够为游客提供更加便捷的旅游服务和游览体验&#xff0c;也逐渐…

Android Gradle开发与应用 (四) : Gradle构建与生命周期

1. 前言 前几篇文章&#xff0c;我们对Gradle中的基本知识&#xff0c;包括Gradle项目结构、Gradle Wrapper、GradleUserHome、Groovy基础语法、Groovy语法概念、Groovy闭包等知识点&#xff0c;这篇文章我们接着来介绍Gradle构建过程中的知识点。 2. Project : Gradle中构建…

平台工程: 用Backstage构建开发者门户 - 1

本文介绍了如何使用开源Backstage构建自己的开发者门户&#xff0c;并基于此实践平台工程。本系列共两篇文章&#xff0c;这是第一篇。原文: Platform Engineering: Building Your Developer Portal with Backstage — Part 1 在上一篇文章(平台工程与安全)中&#xff0c;我们介…

Python实现PPT演示文稿中视频的添加、替换及提取

无论是在教室、会议室还是虚拟会议中&#xff0c;PowerPoint 演示文稿都已成为一种无处不在的工具&#xff0c;用于提供具有影响力的可视化内容。PowerPoint 提供了一系列增强演示的功能&#xff0c;在其中加入视频的功能可以大大提升整体体验。视频可以传达复杂的概念、演示产…

Linux - 基本开发工具

1、软件包管理器 yum 1.1、什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理器可以很方…