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

今天写 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.hqwc.cn/news/132625.html

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

相关文章

数据结构—顺序表

目录 1.线性表 2.顺序表概念 3.实现顺序表 (1)声明结构体 (2)初始化 (3)打印数据 (4) 销毁 (5)尾插&头插 尾插 判断是否扩容 头插 (6)尾删&头删 尾删 头删 (7)指定位置插入元素 (8)删除指定位置元素 (9)查找指定元素位置 (10)修改指定位置元素 完整版…

【21】c++设计模式——>装饰模式

装饰模式的定义 装饰模式也可以称为封装模式,所谓的封装就是在原有行为之上进行扩展,并不会改变该行为; 例如网络通信: 在进行网络通信的时候,数据是基于IOS七层或四层网络模型(某些层合并之后就是四层模型…

Mongodb----部署副本集 实现读写分离

使用软件: xshell7 vmware16 centos8 nosql booster 1 部署副本集 推荐方案: 为了降低资源分配,这里仅使用一台服务器,但是分配3个端口(27017、27018、27019)来分别实现 主节点、副本节点…

35道Rust面试题

这套Rust面试题包括了填空题、判断题、连线题和编码题等题型。 选择题 1 ,下面哪个是打印变量language的正确方法? A,println("{}", language); B,println(language); C,println!("{}", langu…

接口自动化测试 —— 协议、请求流程

一、架构 CRM客户关系管理系统 SAAS Software As A Service 软件即服务 PAAS Platform AS A Service 平台即服务 快速交付→ 快:自己去干、有结果、事事有回音、持续改进 单体架构——》垂直架构——》面向服务架构——》微服务架构(分布式&#xf…

轻量限制流量?阿里云轻量应用服务器月流量包收费说明

阿里云轻量应用服务器部分套餐限制月流量,轻量应用服务器按照套餐售卖,有的套餐限制月流量,有的不限制流量。像阿里云轻量2核2G3M带宽轻量服务器一年108元和轻量2核4G4M带宽一年297.98元12个月,这两款是不限制月流量的。阿里云百科…

解析项目管理任务跟踪器,助力项目进展掌握!

什么是项目管理任务跟踪器?项目管理任务跟踪器是项目经理简化计划、组织和执行项目任务直至完成的重要工具。该工具可帮助他们掌握需要完成的工作、确定收到的工作请求的优先级、完成项目并在预算范围内按时实现目标。 除了布置和跟踪任务之外,项目管理任…

通过Node.js获取高德的省市区数据并插入数据库

通过Node.js获取高德的省市区数据并插入数据库 1 创建秘钥1.1 登录高德地图开放平台1.2 创建应用1.3 绑定服务创建秘钥 2 获取数据并插入2.1 创建数据库连接工具2.2 请求数据2.3 数据处理2.4 全部代码 3 还可以打印文件到本地 1 创建秘钥 1.1 登录高德地图开放平台 打开开放平…

rv1126-rknpu-v1.7.3添加opencv库

rv1126所使用的rknn sdk里默认是不带opencv库的,官方所用的例程里也没有使用opencv,但是这样在进行图像处理的时候有点麻烦了,这里有两种办法: 一是先用python将所需要的图片处理好后在转化为bin格式文件,在使用c或c进行读取&…

【大数据 | 综合实践】大数据技术基础综合项目 - 基于GitHub API的数据采集与分析平台

🤵‍♂️ 个人主页: AI_magician 📡主页地址: 作者简介:CSDN内容合伙人,全栈领域优质创作者。 👨‍💻景愿:旨在于能和更多的热爱计算机的伙伴一起成长!!&…

2023.10.12

#include <iostream>using namespace std; //定义动物类 class Animal { private:string name; public:Animal(){}Animal(string name):name(name){}~Animal(){}//定义虚函数virtual void perform()0;//表演的节目void show(){cout << "Please enjoy the spec…

【多线程】锁策略

目录 1.乐观锁 悲观锁 2.重量级锁 轻量级锁 3.自旋锁 挂起等待锁 4.读写锁 5.可重入锁 不可重入锁 6.公平锁 非公平锁 7.CAS(compare and swap) 8.基于CAS实现线程安全的方式 9.CAS应用场景 9.1 基于CAS实现原子类 9.2 基于CAS实现自旋锁 10.ABA问题及解决方案 11…