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

这篇具有很好参考价值的文章主要介绍了微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

那么 我们先可以 加一个 bindlongpress="longpressHandler"事件
用户长按时触发
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
然后在data中定义一个布尔类型的值
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
当用户长按时 触发bindlongpress
我们就将这个值 赋值为true
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
然后在用户松开时触发的 bindtouchend上再次将这个值变回false
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
这样 我整个逻辑才能闭环

然后 我们在用户拖拽时触发的 handleTouchMove上判断
只有这个监听长按值为false 逻辑才会继续往下走
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
这样我们就做到了 用户长按才能触发bindtouchmove的效果

但是 我们用鼠标轻轻向下或者向上拉 我们会发现movable-view 还是会跟着拖动跑
这是 我们就需要用到官方的 disabled属性
微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果,微信小程序,小程序
这里还是disabled 监听 长按会赋值为true的这个值 如果长按了 这个为true ok 你拖走
否则 disabled的条件成立 这个节点就是禁用的 就不会被拖着走 也不会影响我们整体界面的拖动 上下滚动了文章来源地址https://www.toymoban.com/news/detail-735504.html

到了这里,关于微信小程序 movable-view 控制长按才触发拖动 轻轻滑动页面正常滚动效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序缩放图片与滑动图片:movable-view与swiper一起使用所产生的手势冲突的基本解决方案(操作过于频繁还是会出现问题,基本的使用是没有问题的)

    1.一些参数和需要用到的方法js代码注释都有了,只要复制过去看就好了 2.怎么解决这个手势冲突呢,我采用的是mina-touch插件,去监听这两种手势,当双指在的时候,长按事件就不触发,滑动的时候长按事件也要阻止,因为在不停的滑动的时候,也会长按,大概就是这么一个

    2024年02月15日
    浏览(26)
  • 滑动验证组件---设置movable-view组件的x属性在微信小程序端失效的问题

    滑动验证组件---设置movable-view组件的x属性在微信小程序端失效的问题

    采用uniapp的movable-view组件实现滑动验证组件。 流程 滑块未滑到最右端时,回弹到原点 滑块滑到最右端时,则显示滑动结束,不可再滑动 频繁设置uniapp的movable-view组件的x属性,在H5端正常,但在微信小程序端则失效。 index.vue woSlider.vue H5端 微信小程序端 官方给出的解释: 由

    2024年02月11日
    浏览(11)
  • 整理微信小程序控制view隐藏显示的五种方法

    使元素脱离文档流,通过改变元素的top和left属性值控制元素的显示与否 在页面的js文件中通过修改hidden值来控制

    2024年02月04日
    浏览(17)
  • 微信小程序 movable-area 区域拖动动态组件演示

    微信小程序 movable-area 区域拖动动态组件演示

    movable-area 组件在小程序中的作用是用于创建一个可移动的区域,可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。 使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作,可以通过设置不同的属性和事件来自定义拖动

    2024年02月03日
    浏览(12)
  • 解决微信小程序recycle-view使用百分比单位控制宽高时出现的内容溢出问题

    解决微信小程序recycle-view使用百分比单位控制宽高时出现的内容溢出问题

    recycle-view是微信小程序官方推出的一个经过优化的长列表组件,但是在使用百分比单位控制高宽时有个内容溢出问题,虽然它提供了height和width的参数可以设置宽高,但每次写列表都需要去js里获取宽高并设置是较为麻烦的,所以现在来着手解决使用百分比单位设置宽度时碰到

    2024年02月03日
    浏览(8)
  • 微信小程序通过 movable-area 做一个与vuedraggable相似的上下拖动排序控件

    微信小程序通过 movable-area 做一个与vuedraggable相似的上下拖动排序控件

    因为只是做个小案例 我就直接代码写page页面里了 其实很简单 组件稍微改一下就好了 wxss 就是很普通的样式编写 js代码 我的注释还是写的非常认真的 大家可以好好读一读 然后 wxml 没什么特别的 就是渲染一下list 这样 我们就做了一个 可以上下拖动元素排序的小案例了 效果也

    2024年02月07日
    浏览(14)
  • 微信小程序长按与单击事件触发

    方式一 wxml 片段 js 片段 解析 tap 触摸事件采用 catch 阻止事件冒泡 1.5.0之后支持 longpress 事件,手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 方式二(不推荐) longtap 事件,但在触发时会同时触发单击事件,需配合 touchstart 和

    2024年02月12日
    浏览(12)
  • 微信小程序-长按显示,点击空白区域关闭

    微信小程序-长按显示,点击空白区域关闭

    之前使用longtap,松开后会触发tap事件,刚出来就会消失,使用longpress后就可以解决这个问题了

    2024年04月22日
    浏览(16)
  • 微信小程序长按识别二维码

    有两种方式,第一种是在页面直接长按识别,第二种是预览图片,然后识别。 第一种实现:直接在页面中长按识别二维码 在图片组件中添加 show-menu-by-longpress=\\\"{{true}}\\\" ; 示例代码 第二种实现:放大预览图片后,长按识别二维码

    2024年02月11日
    浏览(11)
  • 微信小程序:长按图片识别二维码

    方法一:使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true,当image被长按时会弹出选择菜单 方法二:当图片预览时,长按图片会弹出菜单:

    2024年02月12日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包