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

最新推荐文章于 2024-04-30 17:24:54 发布
最新推荐文章于 2024-04-30 17:24:54 发布
阅读量1.9k 收藏
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/133800163
版权

今天写 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的条件成立 这个节点就是禁用的 就不会被拖着走 也不会影响我们整体界面的拖动 上下滚动了

瑞晟技术服务中心-耿瑞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序movable-view移动图片和双指缩放
03-29
先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注: “当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方
微信小程序基于movable-view实现滑动删除效果
10-15
总结起来，微信小程序中基于`movable-view`实现滑动删除效果，需要综合运用布局、样式和事件处理，通过调整组件属性和编写对应的逻辑代码来达到理想的效果。在实践中，开发者需要不断调试和优化，以提供流畅且友好的...
微信小程序学习第5周————movable-view（可移动视图区域--右滑删除效果）
潜心
09-30 7336
**Movable-view：**可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 1、首先按要求创建movable-view组件，需包含在movable-area组件中 2、属性： direction：属性值有all(所有方向)、vertical(纵向)、horizontal(横向)、none(没有方向) Inertia:是否带有惯性（布尔） out-of-bounds：超过可移动区域后，movable-vie
微信小程序客服浮窗按钮停止触摸后吸附回到左侧
最新发布
qq_43271846的博客
04-30 323
客服浮窗按钮停止触摸后吸附回到左侧
微信小程序实现可长按移动控件
qq_40903982的博客
10-28 1175
微信小程序可长按移动控件 –包含超出边界监测，性能不够理想【原因：setData在毫秒级刷新时会极大程度影响渲染性能】 Javascript Page({ /** * 页面的初始数据 */ data: { //浮动按钮坐标 flow_y: 130, flow_x: 20, pre_y:0, pre_x:0, //标记移动 moveFlag: false, //标记控件是否可放置 canNotPlace: false
movable-view 组件(可上下左右拖动 )
m0_53912016的博客
07-26 397
代码】movable-view组件(可上下左右拖动)
uniapp+vue move-view 拖拽滑动效果组件
WangYan的博客
01-05 2126
uniapp自身提供了movable-area/movable-view标签实现拖拽滑动效果，但是实际开发中发现，此标签跟滚动效果有冲突，会影响内部列表的滚动效果，基于此，所以单独封装了两种模式的滑动组件。
微信小程序长按拖拽排序
m0_55969466的博客
01-02 2237
微信小程序长按拖拽排序。
微信小程序 movable-view
03-29
微信小程序 movable-view       movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。     1.属性： 属性名 类型  默认值 说明 direction String  none movable-view的移动方向，属性值有all、...
微信小程序movable view移动图片和双指缩放实例代码
01-03
movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整...
微信小程序新增的拖动组件movable-view使用教程
12-10
此次的更新中，也新增了一个UI组件，它就是视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。 我们来看一个简单的示例： <movable xss=removed>...
微信小程序实现长按拖拽排序 左滑删除DragSort-master-master.zip
09-25
微信小程序实现长按拖拽排序 左滑删除DragSort-master-master.zip
微信小程序移动拖拽视图-movable-view实例详解
12-12
JS中的sender参数（sender是事件的传值）前提是只有一个touch移动的时候。多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedTouches[0].pageX); }, .wxss内容
wxapp-movable-delete-微信小程序使用movable开发滑动删除功能。.zip
09-23
微信小程序官方没有自带的左滑删除功能，一般开发的时候都是使用touch事件来开发自定义的左滑删除，处理起来会有点麻烦。微信小程序出了movable-view(点击查看官方文档)之后，在某些特殊情况下可以使用movable-view来开发左滑删除功能，会比较简单一些。实现原理  1. 左滑的元素高度需要是固定的，因为movable-view要求必须设置width和height；  2. 删除的按钮固定在右侧，设置一定的宽度； 3. movable-area宽度设置为100vw-删除按钮宽度，movable-view宽度设置为100vw；  4. 根据movable-view的x属性来控制元素滑动，为了避免滑动到一半只显示部分按钮，可以设置滑动小于一半不再滑动时回复到初始位置，超过一半则继续滑动到底。效果图
微信小程序实现拖拽功能
12-30
0}} bindtouchmove=touchmove catch:touchmove style=left:{{write[0]}}px;top:{{write[1]}}px;> // pages/cateDetaile/cateDetaile.js const app = getAp
微信小程序组件 movable-area 穿透性问题
qq_36437172的博客
10-21 9273
使用场景：在页面中，通过拖动图标，可以在手机窗口中随处移动，且不超出手机窗口范围。 movable-area的可移动区域，注意：movable-area 必须设置width和height属性，不设置默认为10px movable-view 可移动的视图容器，在页面中可以拖拽滑动，详情查看小程序官方文档 问题一：首次进入页面，拖动图片页面，图片随着鼠标移动。滚动页面后，再去移动图片，图片消失...
微信小程序--movable-view(可移动的视图容器)
Afanbaby的博客
12-23 3658
可移动的视图容器，在页面中可以拖拽滑动 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html 注意：movable-area 必须设置width和height属性，不设置默认为10px1.可以设置移动的方向： direction：属性值有all(所有方向)、vertical(纵向)、horizont
微信小程序之movable-view的direction用法
weixin_44014980的博客
06-25 2001
微信小程序之movable-view的direction用法 movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动，movable-area的大小必须比movable-view大 movable-view 之 direction direction:all ：可随意滑动； 效果如下： direction:horizontal ：横向滑动...
微信小程序页面实现悬浮框长按拖拽，点击跳转到直接链接，
05-31
实现微信小程序页面悬浮框长按拖拽可以使用小程序提供的 movable-view 组件，将需要拖拽的元素放在 movable-view 中，并设置 direction 属性为 all，表示可以在水平和垂直方向上拖拽。 例如： ```html <view class="container"> <movable-view direction="all" class="ball"> 悬浮框 </movable-view> </view> ``` 对于点击跳转到直接链接的需求，可以使用小程序提供的 navigator 组件，将需要跳转的元素放在 navigator 中，并设置 url 属性为跳转的链接地址。 例如： ```html <navigator url="/pages/detail/detail"> <view class="detail-btn"> 查看详情 </view> </navigator> ``` 需要注意的是，在小程序中跳转到外部链接需要在小程序管理后台配置合法域名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值