微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果

news2025/4/21 8:50:34

今天写 movable-area+movable-view遇到了个头疼的问题
那就是 movable-view 监听了用户拖拽自己 但 我们小程序 上下滚动页面靠的也是拖拽 也就是说 如果放在这里 用户拖动 movable-view部分 就会永远触发不了滚动

那么 我们先可以 加一个 bindlongpress="longpressHandler"事件
用户长按时触发
在这里插入图片描述
然后在data中定义一个布尔类型的值
在这里插入图片描述
当用户长按时 触发bindlongpress
我们就将这个值 赋值为true
在这里插入图片描述
然后在用户松开时触发的 bindtouchend上再次将这个值变回false
在这里插入图片描述
这样 我整个逻辑才能闭环

然后 我们在用户拖拽时触发的 handleTouchMove上判断
只有这个监听长按值为false 逻辑才会继续往下走
在这里插入图片描述
这样我们就做到了 用户长按才能触发bindtouchmove的效果

但是 我们用鼠标轻轻向下或者向上拉 我们会发现movable-view 还是会跟着拖动跑
这是 我们就需要用到官方的 disabled属性
在这里插入图片描述
这里还是disabled 监听 长按会赋值为true的这个值 如果长按了 这个为true ok 你拖走
否则 disabled的条件成立 这个节点就是禁用的 就不会被拖着走 也不会影响我们整体界面的拖动 上下滚动了

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

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

相关文章

网工内推 | 技术支持工程师,厂商公司,HCIA即可,有带薪年假

01 华为终端有限公司 招聘岗位:初级技术支持 职责描述: 1、通过远程方式处理华为用户在产品使用过程中各种售后问题; 2、收集并整理消费者声音,提供服务持续优化建议; 3、对服务中发现的热点、难点问题及其他有可能造…

火伞云Web应用防火墙的特点与优势

在前文中,我们已经介绍了Web应用防火墙(WAF)的基本原理和重要性。接下来,我们将深入探讨火伞云Web应用防火墙的特点与优势,了解它如何为企业提供更为完善和专业的网络安全保障。 一、强大的防御能力 火伞云Web应用防火…

【数据库——MySQL(实战项目1)】(1)图书借阅系统——数据库结构设计

目录 1. 简述2. 功能3. 数据库结构设计3.1 绘制 E-R 图3.2 创建数据库3.3 创建表3.4 插入表数据 1. 简述 经过前期的学习,我们已经掌握数据库基础操作,因此是时候来做一个实战项目了——图书借阅系统。对于图书借阅系统,相信大家不难想到至少…

天猫用户重复购买预测(速通一)

天猫用户重复购买预测(一) 赛题理解1、评估指标2、赛题分析 理论知识1.缺失值处理2.不均衡样本3.常见的数据分布 数据探索探查影响复购的各种因素1.对店铺分析2.对用户分析3.对用户性别的分析4.对用户年龄的分析 特征工程1、特征工程介绍特征归一化类别型…

Docker系列--镜像和容器备份与恢复的方法

原文网址:Docker系列--镜像和容器备份与恢复的方法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍备份和恢复Docker镜像与容器的方法。 命令对比 保存与导出 docker save:保存的是镜像(image)。(保存的是分层的…

刷新页面,数据丢失

刷新页面数据丢失原因很多,其中有一种是解析错误,没有解构出来。 报错内容如下(类似这个报错): 数据结构如下: this.$router.push({name: DetailComparison,query: {rowDetail: rowDetail || null} }) 修改数据结构&#xff1a…

2023C语言暑假作业day7

1选择题 1 以下对C语言函数的有关描述中,正确的有【多选】( ) A: 在C语言中,一个函数一般由两个部分组成,它们是函数首部和函数体 B: 函数的实参和形参可以是相同的名字 C: 在main()中定义的变量都可以在其它被调函数…

python安装(windows64简洁版)

一、Python安装 软件安装四部曲 官网下载(注意电脑和版本):python官网. 例如window64下载对应版本 环境变量配置 在命令提示框中(cmd) : 输入 path%path%;C:\Python 按下 Enter。 注意: C:\Python 是Python的安装目录。 验证是否安装成功 编…

Windows下Redis3.0集群搭建

redis版本:Redis-x64-3.0.504 复制相同文件 修改文件夹下redis.windows.conf 文件配置(注意:主有密码,从必须有密码且跟主相同) 修改端口: 主库:端口号6379 从库1:修改端口号为6380 从库2:修…

家政服务小程序,家政维修系统,专业家政软件开发商;家政服务小程序,家政行业软件开发

家政服务小程序,家政维修系统,专业家政软件开发商; 家政服务小程序,家政行业软件开发解决方案,家政软件经验丰富实践,系统高度集成,提供师傅端、用户端、… 家政服务app开发架构有 1、后台管理端…

Java的File文件操作案例汇总

Java的File文件操作案例汇总 案例汇总【1】MultipartFile与File的互转(1)前言(2)MultipartFile转File(3)手动删除(4)File转MultipartFile 【2】前端上传文件,后端解析出文…

拓扑排序求最长路

P1807 最长路 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目要求我们求出第1号到第n号节点之间最长的距离。 我们想到使用拓扑排序来求最长路。 正常来讲,我们应该把1号节点入队列,再出队列,把一号节点能到达的所有的点的入度减一&a…

网线接法aaa

![(https://img-blog.csdnimg.cn/d2901403dbd44feaa8f7be669ddcf2fc.png) 加粗样式 在这里插入图片描述

ZTree自定义不可展开节点的折叠图标

目录 1. 场景2. 实现过程3. ZTree 关键配置代码4. 小结 💬 1. 场景 需求是自定义去控制某个节点,让它不可以展开,但因为它底下有子节点,所以默认的折叠图标还是+号。 也就是要实现让不可展开的节点前的折叠图标显示-号…

浅谈IT运维-服务请求管理与变更管理的关系与区别

服务请求 用户或用户授权代表发起的服务动作的请求,该服务动作已约定为服务交付的正常部分。服务请求是用户问询的重要类型,也是用户体验的重要组成部分。通常,服务请求包括以下内容: 发起服务动作请求(由服务提供者或与用户一起执行)信息请求资源或服务访问请求反…

Python还有什么赋值?Python赋值语句的多种形式

Python是一种强大且灵活的编程语言,其赋值语句的多样性是其特色之一。除了常见的变量赋值,Python还支持许多其他赋值方式,包括多重赋值、增量赋值以及解包赋值等。在本文中,我们将深入探讨Python中赋值语句的多种形式,…

日志管理工具Zap笔记

文章目录 Uber-go Zap日志库为什么选择 Zap配置 Zap Logger1. Logger2. SugaredLogger 定制logger1. 将日志写入文件而不是终端2. 将JSON Encoder更改为普通的Log Encoder3. 更改时间编码并添加调用者详细信息4. AddCallerSkip5. 将err日志单独输出到文件 使用Lumberjack进行日…

ARM按键中断实验

设置按键中断,按键1按下,LED亮,再按一次,灭 按键2按下,蜂鸣器响。再按一次,不响 按键3按下,风扇转,再按一次,风扇停 src/do_irq.c #include "key_it.h" ex…

基于Java+SpringBoot+Vue精品水果线上销售网站的设计与实现 前后端分离【Java毕业设计·文档报告·代码讲解·安装调试】

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

对验证码的识别爆破

声明:该系列文章首发于公众号:Y1X1n安全,转载请注明出处!本公众号所分享内容仅用于每一个爱好者之间的技术讨论及教育目的,所有渗透及工具的使用都需获取授权,禁止用于违法途径,否则需自行承担&…