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

一、微信小程序触屏事件

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.mzph.cn/news/723765.shtml

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

相关文章

pgvector docker部署测试

docker pull pgvector/pgvector:pg16 运行 docker run --name pgvector --restartalways -e POSTGRES_USERpgvector -e POSTGRES_PASSWORDpgvector -v /srv/tlw/pgvectordata:/var/lib/postgresql/data -p 54333:5432 -d pgvector/pgvector:pg16 CREATE EXTENSION vector; --…

总结:大模型技术栈---算法与原理

原文地址&#xff1a;大模型技术栈-算法与原理 1. tokenizer方法 word-level char-level subword-level BPE WordPiece UniLM SentencePiece ByteBPE2. position encoding 绝对位置编码 ROPE AliBi 相对位置编码 Transformer-XL T5/TUPE DeBERTa3. 注意力机制 Mamba,H3,Hyena…

【Redis】Redis持久化模式RDB

目录 引子 RDB RDB的优缺点 小节一下 引子 不论把Redis作为数据库还是缓存来使用&#xff0c;他肯定有数据需要持久化&#xff0c;这里我们就来聊聊两种持久化机制。这两种机制&#xff0c;其实是 快照 与 日志 的形式。快照:就是当前数据的备份&#xff0c;我可以拷贝到磁…

C语言指针的初步认识--学习笔记(3)

1. 字符指针变量 在C语言中&#xff0c;字符串通常被视为字符数组&#xff0c;但它们可以有不同的表示方式。字符指针变量存储的是字符串的地址。这意味着&#xff0c;当你有一个字符串时&#xff0c;你可以通过改变字符指针的值来改变这个字符串&#xff0c;因为你实际上改变的…

保修期内经营者收取维修费用应遵循正当程序原则

↑↑↑“上海高院”头条号为您讲述精彩的法律科普内容 上海市第一中级人民法院在履行司法审判职能的同时&#xff0c;始终高度重视高质量案件工作&#xff0c;总结司法审判经验&#xff0c;努力提高司法审判质量。 在2020年全国法院系统优秀案例分析评选活动中&#xff0c;上海…

合并有序链反转链表(递归版)

每日一题系列&#xff08;day 19&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50…

基于RFID技术+WMS仓储管理应用设计

一、项目背景 1.1 背景 仓储管理是企业对仓库及其内部物资进行计划、组织、控制和协调的管理过程。它在整个物流和经济活动中扮演着重要的角色&#xff0c;连接着生产者和消费者。 不同规模和产品种类的企业有不同的仓储管理流程和需求&#xff0c;但核心部分都包括仓库作业…

设计模式:策略模式 ⑥

一、策略模式思想 简介 策略模式&#xff08;Strategy Pattern&#xff09;属于对象的行为模式。其用意是针对一组算法&#xff0c;将每一个算法封装到具有共同接口的独立的类中&#xff0c;从而使得它们可以相互替换。策略模式使得算法可以在不影响到客户端的情况下发生变化。…

msvcp120.dll丢失的解决方法,教你快速解决msvcp120.dll问题

msvcp120.dll是一个在Windows操作系统中至关重要的系统文件&#xff0c;它属于Microsoft Visual C Redistributable Package的一部分。这个动态链接库文件&#xff08;DLL&#xff09;包含了运行某些应用程序所必需的C运行时库函数。当某个程序在运行过程中需要调用这些预先编译…

关于制作一个Python小游戏(三)

目录 前言: 在前面我们已经了解过了关于制作pygame的使用和在里面游戏中的简单操作的内容了,今天我们主要讲的就是关于敌机的出现和如何去操控游戏中英雄飞机和敌机的出现 1.敌机的设计: 1.1敌机出场的实现: 1.1.1游戏启动后,每个一秒钟出现一架敌方飞机 1.1.2每架敌机向屏…

九章云极DataCanvas公司出席WBBA 2024宽带发展大会

2024年2月27日&#xff0c;由全球云网宽带产业协会&#xff08;World Broadband Association, WBBA&#xff09;主办的全球宽带产业盛会——宽带发展大会&#xff08;Broadband Development Congress, BDC&#xff09;&#xff0c;与全球云网宽带产业合作伙伴相约巴塞罗那。九章…

【爬虫】单首音乐的爬取(附源码)

以某狗音乐为例 import requests import re import time import hashlibdef GetResponse(url):# 模拟浏览器headers {User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0}# 发送请求…

Milvus 向量数据库实践 - 1

假定你已经安装了docker、docker-compose 环境 参考的文档如下&#xff1a; Milvus技术探究 - 知乎 MilvusClient() - Pymilvus v2.3.x for Milvus 一文带你入门向量数据库milvus 一、在docker上安装单机模式milvus数据库 1、 进入milvus官网&#xff1a; Install Milvus Stand…

LeetCode:1976. 到达目的地的方案数(spfa + 记忆化 Java)

目录 1976. 到达目的地的方案数 原题链接 题目描述&#xff1a; 实现代码与解析&#xff1a; spfa 记忆化 原理思路&#xff1a; 1976. 到达目的地的方案数 原题链接 1976. 到达目的地的方案数 题目描述&#xff1a; 你在一个城市里&#xff0c;城市由 n 个路口组成&a…

html 文字滚动

<marquee> 标签 创建文字滚动的标签 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>wzgd</title></head><body><marquee direction"left" height"30" width"600&q…

Qt Creator配置MSVC编译环境、调试环境

在windows上开发&#xff0c;一般使用Qt Creator自带mingw编译器&#xff0c;编译和调试都很方便&#xff0c;安装Qt时勾选后&#xff0c;自动配置完毕。 但是有时候我们需要使用MSVC的编译器&#xff0c;这个时候我们没法直接使用&#xff0c;需要配置环境才能使用&#xff0…

十秒学会Ubuntu命令行:从入门到进阶

一、引言 在使用Ubuntu操作系统时&#xff0c;命令行界面&#xff08;CLI&#xff09;是不可或缺的一部分。对于初学者来说&#xff0c;掌握基本的命令行操作可以帮助他们更高效地管理系统和软件。 本文将介绍一些常见的Ubuntu命令以及如何解决与命令行相关的问题。 目录 一、…

基于umdf2的驱动程序

源码下载&#xff1a;https://download.csdn.net/download/mao0514/88915667 win10 64位系统vs2019wdk inf安装&#xff1a; VOID UMDF2Driver1EvtIoDeviceControl(_In_ WDFQUEUE Queue,_In_ WDFREQUEST Request,_In_ size_t OutputBufferLength,_In_ size_t InputBufferLen…

BUUCTF-Misc-百里挑一

题目链接&#xff1a;BUUCTF在线评测 (buuoj.cn) 下载附件打开是一个流量包文件&#xff1a; 全是在传图片时候的流量&#xff0c;先把图片保存出来文件–>导出对象–>HTTP–>保存到一个文件夹 然后使用kali下的exiftool找到了一半flag exiftool *|grep flag 另外一半…

工业网关、物联网网关与PLC网关是什么?

网关是什么&#xff1f; 网关是一种用于连接不同网络的网络设备&#xff0c;其作用是实现网络之间的通信和数据交换。它负责将一个网络的数据转发到另一个网络&#xff0c;并且可以进行路由、转换和过滤等处理。通常用于连接局域网和广域网之间&#xff0c;可以是硬件设备或者软…