微信小程序滑动穿透问题使用catchtouchmove

最新推荐文章于 2024-11-22 12:00:48 发布
最新推荐文章于 2024-11-22 12:00:48 发布
阅读量5.6k 收藏 2
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/107845366
版权

问题复现:
在这里插入图片描述

顶部分类可以滑动到另一个分类用的scroll-view,图中圈中部分仅仅只是一个小区域横向滑动,不需要滑动到尽头切换分类,

解决方法:

<scroll-view class="fdlist" scroll-x="true" catchtouchmove='catchTouchMove'>
在scroll-view中加入catchtouchmove事件,
在js中加入这个函数

	catchTouchMove: function() {
	    return false;
	  },
喔烨鸭
关注
小程序catchtouchmove事件
hahahhahahahha123456的博客
06-03 6968
wxml： <view class="moveWrap"> <view class="move" style="height:{{rH}}rpx;width:{{rW}}rpx;left:{{x}}px;top:{{y}}px;" catchtouchmove="_minMove"></view> </view> wcss: /* pages/move/move.wxss */ .moveWrap { height: 100vh; widt
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 2900
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
微信小程序swiper禁止用户手动滑动代码实例
10-16
主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动
11-01 2939
微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动
微信小程序怎么解决弹框遮罩层出现滚动穿透问题
最新发布
qq_58956810的博客
11-22 311
但是滚动穿透问题解决了，页面却触发不了触底更新加载数据，大概原因是.page页面设置了psoition:absolute;固定定位的盒子放在了scroll-view标签里面，也就相当于scroll-view来定位了，这些元素会在滑动页面时跟着滚动，而不是固定在屏幕上，所以只需要把position: fixed;‌：在position的元素上添加catch属性，并留空对应的函数，这样在滚动到最顶部或最底部时就不会影响页面的滚动‌。参考文档，看了一下，里面的其他方案也是可行的。
微信小程序中巧妙使用 wx:if 和 catchtouchmove 实现弹窗禁止页面滑动功能
Jiaberrr的博客
09-13 1062
首先，我们需要在页面的 data 对象中定义一个布尔类型的属性，用于控制弹窗的显示与隐藏。Page({data: {showModal: false // 控制弹窗显示与隐藏});在 Page 对象中，我们需要定义函数，用于阻止滑动事件。Page({// ... 其他数据和方法// 阻止滑动事件可以不做任何操作就能阻止滑动});
微信小程序引入组件以及catchtouchmove实现拖动效果
吕小布布布的博客
04-23 9803
首先我们建一个跟pages同级的一个文件夹components，customer里面就是我们要写的组件，其目录结构如下： wxml代码如下： <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{left}}rpx"> <button open-ty...
微信小程序catchtouchmove 禁止弹层划动，避免划动下方页面
徐飞的博客
02-15 1612
微信小程序catchtouchmove 禁止弹层划动，避免划动下方页面
微信小程序滑动穿透问题，使用catchtouchmove警告 handle event “touchmove“
九亿宅男的梦的博客
06-20 1252
微信小程序滑动穿透问题，使用catchtouchmove警告 handle event "touchmove"
【小程序教程】微信小程序的事件处理和交互逻辑（tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解）
10-31 2721
事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因：提升用户体验：良好的事件处理和交互逻辑可以使小程序更加易用和友好，提升用户体验。通过合理设置事件触发条件和交互效果，可以使用户操作更加顺畅和自然。增加功能和互动性：事件处理可以实现用户与小程序之间的交互，例如点击按钮、滑动页面、输入表单等。通过事件处理，开发者可以为小程序增加各种功能和互动性，满足用户的需求。数据交互和更新：事件处理可以与后台数据进行交互，实现数据的获取、更新和展示。
解决微信小程序中的滚动穿透问题
01-03
> 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象. 如图： 当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。 这就是蒙层穿透， 也可以叫 ‘滚动穿透’. 当然...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
本文将详细介绍如何在微信小程序中处理这些问题。 ### 1. 滚动穿透（Scroll Through） 滚动穿透通常发生在弹窗或半透明遮罩层出现时，用户在这些层上滑动，但希望底层页面的内容能够继续滚动。为了解决这个问题，...
微信小程序实现手势滑动效果
12-29
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下 wxml: index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 var interval = ;// 记录/清理时间记录 var touchMoveX = 0
微信小程序 刷新上拉下拉不会断详细介绍
01-03
微信小程序 上拉下拉不会断详细介绍 最开始看到效果图，不错，第一想到的是用做的，添加浮动层，然后设置浮动层高度。其实不然，大牛是”enablePullDownRefresh”: “true”后，在页面添加遮掩层，并跟随底部滑动即可。（感觉自己IQ该充值了） 上代码 news.wxml <view class=top>下拉刷新</view> <view> <!--页面正文--> </view> news.wcss .top { width: 100%; height: 600rpx; position: fixed; top: 0; background-color:
微信小程序滑动窗口触控穿透问题解决
05-17
微信小程序中，滑动窗口触控穿透问题可以通过以下几种方式解决： 1. 使用`catchtouchmove`属性阻止触摸事件传递 ...以上是解决微信小程序滑动窗口触控穿透问题的几种方式，可以根据具体情况选择不同的方法进行解决。
微信小程序 scroll-view滑动
weixin_45672809的博客
08-10 842
微信小程序 scroll-view滑动 scroll-view纵向滑动 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px <!-- wxml --> <scroll-view scroll-y="true" style="height:300px"> <view class="item_1"></view> <view class="item_2"><
微信小程序弹出层禁止滚动穿透
sxy323的博客
04-19 1316
uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动
小程序: catchtouchmove阻止弹窗后滚动穿透
轻风细雨_林木木
11-11 1943
参考资料：https://blog.csdn.net/u010809694/article/details/88317752 解决办法： 在触发页面的view上设置catchtouchmove='方法名’ 实例： 代码： <view catchtouchmove='filterViewMove'> /* 内容…… */ </view> 备注： 只要在触发页面设置方法就好，但是为了避免提示报错，可以在.js文件中添加一个对应方法。 ...
解决微信小程序自定义弹窗滚动穿透问题
记录本人工作中遇到的问题、经验总结以及分享。
05-31 4885
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。当出现弹窗时，为wxml最外层元素动态添加fixed类。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。可以实现弹框背景不滚动，但是。也会导致弹框自身无法滚动。
微信小程序scroll-view滑动穿透问题，怎么解决
05-17
微信小程序中，scroll-view 组件默认会阻止页面上其他元素的滑动事件，这可以通过设置 `catchtouchmove` 属性来解决。 具体做法如下： 1. 在 scroll-view 组件上添加 `catchtouchmove="true"` 属性，如下所示： ```html <scroll-view catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 2. 在页面的 `onLoad` 或 `onReady` 生命周期中，获取 scroll-view 组件的高度和宽度，然后在页面上添加一个与 scroll-view 同样大小的透明的 view，并将其 zIndex 设置为比 scroll-view 更高的数值，这样就可以让页面上的其他元素在透明的 view 上进行滑动了。代码如下： ```javascript onLoad: function () { var that = this; wx.createSelectorQuery().select('#scrollview').boundingClientRect(function (rect) { that.setData({ scrollHeight: rect.height }); }).exec(); wx.getSystemInfo({ success: function (res) { that.setData({ windowHeight: res.windowHeight }); } }); }, ``` ```html <!-- 添加一个与 scroll-view 大小相同的透明 view --> <view class="transparent-view" style="height: {{windowHeight - scrollHeight}}px; z-index: 1;"></view> <scroll-view id="scrollview" catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 3. 在页面的 CSS 中，让透明的 view 不显示出来，代码如下： ```css .transparent-view { background-color: transparent; } ``` 通过以上步骤，就可以解决微信小程序中 scroll-view 组件滑动穿透的问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值