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

一、微信小程序触屏事件

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,一经查实,立即删除!

相关文章

java可变参数使用

java可变参数使用 在Java中&#xff0c;可变参数是一种特殊的语法&#xff0c;允许方法接受可变数量的参数。可变参数在方法声明中使用省略号(...)来表示&#xff0c;可以接受任意数量的参数&#xff0c;甚至可以不传递参数。 可变参数只能做为函数的最后一个参数一个函数最多只…

MySQL中having和where的区别及应用详解

这篇文章主要给大家详细介绍了MySQL中having和where的区别以及他们的使用方法&#xff0c;文中有相关的代码示例&#xff0c;具有一定的参考价值,需要的朋友可以参考下 − 目录 having 和 where 区别having 和 where 应用总结&#xff1a; having 和 where 区别 having是对…

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;上海…

leetcode225.用栈实现队列

解法2:1个队列实现栈 思路&#xff1a;假如我有4个元素1,2,3,4需要入栈&#xff0c;push了之后就是顺着号是1,2,3,4如果我pop了&#xff0c;那我就先获取队列大小&#xff0c;每次先把头插入到队列末尾&#xff0c;然后删除头&#xff0c;循环执行size-1次&#xff0c;&#x…

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

每日一题系列&#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…

微信小程序显示PDF文件

需求&#xff1a;在小程序中显示PDF文件 思路&#xff1a;wx.openDocument打开新的网页&#xff0c;显示PDF文件 <view click"showPdf">点击查看协议</view>showPdf() {// let url otption.currentTarget.dataset.index.keyValue;let url "https:…

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…

常见运维面试题

1. 描述Linux文件系统的结构和主要组件。 Linux文件系统的结构是层次化的&#xff0c;并且它有索引节点&#xff08;inode&#xff09;和目录项&#xff08;dentry&#xff09;等主要组件。 Linux文件系统的结构设计得非常巧妙&#xff0c;它采用了一种标准的层次化结构来组织…