微信小程序滑动穿透解决方案

最新推荐文章于 2024-05-30 10:46:37 发布
最新推荐文章于 2024-05-30 10:46:37 发布
阅读量3.3k 收藏 7
点赞数 5
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45987635/article/details/117927514
版权

微信小程序滑动穿透解决方案

微信小程序弹窗滑动会穿透，导致底层也会跟着滑动。

在网上找了好多方法都没有解决滑动穿透问题，后来在开发中做滑动的时候用到了scroll-view，后改用这个标签尝试了一下，果然解决了滑动穿透的问题。

出现滑动穿透的原因是因为自己布局用错标签造成的。

解决方式：

  • 弹窗外层禁用滑动事件
  • 弹窗中的滑动部分使用用scroll-view

下面上代码：

<view catchtouchmove='false'>
	<scroll-view scroll-y>
		<!-- content -->
	</scroll-view>
</view>

这样就解决了小程序的滑动穿透问题。

yuzhou.nice
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
01-20
scroll-view滚动穿透，阻止滚动 页面弹窗阻止滚动是一种常见的问题，这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove=doNothing></view> 也可直接写catchtouchmove，相当于绑定了事件名为true的事件 问题场景 在小程序中，在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素，必须使用
微信小程序滑动穿透问题解决
睡不够
11-02 778
微信小程序滑动穿透问题解决 在弹出部分的wxml代码上加catchtouchmove="true"可解决滑动穿透问题 <!-- 弹出窗 --> <view class="pop" catchtouchmove="true"></view>
解决微信小程序自定义弹窗滚动穿透问题
最新发布
aaa123aaasqw的博客
05-30 282
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
如何彻底解决小程序滚动穿透问题
qq_31699019的博客
07-01 795
我们在开发过程中总会有开发弹窗的需求，在弹窗弹起来的时候，底部的内容却可以滚动，最开始我们使用catchtouchmove解决了，但是在特殊布局的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。 就不卖关子了，我摊牌了。 使用官方的page-meta组件，很多童鞋可能还不知道这个是干嘛的，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 通过该组件我们可以直接操作Page组件 ，我
记一次uniapp使用scroll-view标签产生的滑动穿透的解决方法
XXCJLRC的博客
10-22 3231
uniapp滑动穿透问题记录
uniapp弹出层使用scroll-view进行内容滚动+锚点定位滑动到最底部，解决弹出层滚动穿透
热门推荐
qq_43958325的博客
12-29 1万+
uniapp弹出层使用scroll-view内容滚动+锚点定位，解决弹出层滚动穿透
微信小程序 解决滑动穿透的方法
IT_iosers的博客
05-31 625
第一种 弹窗外层禁用滑动事件 弹窗中的滑动部分使用用scroll-view 代码 <view catchtouchmove='false'> <scroll-view scroll-y> <!-- 内容--> </scroll-view> </view> 第二种 传送门
微信小程序滑动删除页面
04-10
总之，微信小程序中的滑动删除功能需要结合JS逻辑、页面结构、样式和事件监听来实现。通过合理地组合和配置这四个基本文件，我们可以创建出符合需求的交互页面。在实际开发过程中，还需注意性能优化，避免因大量数据...
微信小程序滑动解锁手势解锁源代码
09-10
微信小程序滑动解锁是一种常见的用户交互方式，常用于提高应用的安全性和用户体验。在这个项目中，开发者分享了模仿滑动解锁功能的源代码，方便其他开发者学习和研究。下面将详细介绍这个微信小程序滑动解锁实现的...
微信小程序拼图验证demo旨在解微信小程序滑动卡顿问题
08-10
本项目"微信小程序拼图验证demo"是针对微信小程序在实现滑动验证时可能出现的卡顿问题进行优化的示例。 滑动验证通常用于增强安全性，防止机器人或自动化程序进行恶意操作。在微信小程序中，由于其渲染机制和性能...
微信小程序实现滑动删除效果
01-03
遗憾的是小程序中目前没有像Android中快速滑动事件，所以，要实现惯性滑动是不可能了。 item的布局： 推荐小程序优先使用flex布局，完全够用。这也是微信推荐的。 <view wx:for={{cardTeams}} wx:for-item=...
小程序页面滚动穿透
这魏先森-forguo
06-26 5254
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
小程序解决弹窗滑动穿透问题
为啥不能换名字的博客
08-13 777
## 解决方案 1.当弹窗没有滚动条的时候 直接监听 catch:touchmove 方法， 然后直接返回就可以了 <view catchtouchmove="{{preventTouchMove}}"></view> preventTouchMove(){ return } 2.当弹窗内容需要滚动的时候&&当前页面无需滚动 如果你页面没有滚动条可以直接给当前页面最父级元素fixed定位一下或者overflow：hidden一下 3当弹窗内容需
微信小程序滚动穿透问题
Hassan的小博客!
02-10 4195
微信小程序滚动穿透
scroll 滚动穿透的解决方案
沙骑马
08-24 1595
scroll 滚动穿透的解决方案 项目场景： 适用所有页面有滚动且有弹出的情况，禁止弹层上滑动行为触发底层页面的滚动 问题描述： 页面有滚动条，当有弹层弹出时，弹出层上touchmove事件会触发底层页面滚动 解决方案： scrollview的高度固定，内部view的高度自由撑开，大于scrollview的高度时就会出现滚动条 <ScrollView scrollY style={height}> <View>需要滚动的内容</View> </Scr
uniapp 解决滑动穿透 （模态滚动影响页面滚动）
^_^
03-31 5674
在平常写一些小程序时，避免不了有一些设计是在弹层上面操作的，也避免不了设计的原型上面的模态可以滑动，这时候就会出现一个滚动穿透的问题。 解决方案 <view class="mask" @touchmove.stop.prevent="moveHandle"></view> methods:{ moveHandle(){ return true }, } 此方法 只能解决 不触发页面底部的滚动 如果在模态上面有列
小程序滚动穿透问题分析
qq_45245885的博客
08-07 758
最近在做微信小程序，由于之前小程序这类的项目经验不是很丰富所以遇到了很多问题，甚至有百度解决不了的问题不得不求助老师。下面总结一下遇到的问题的原因及解决方案。
微信小程序滑动窗口触控穿透问题解决
05-17
微信小程序中，滑动窗口触控穿透问题可以通过以下几种方式解决： 1. 使用`catchtouchmove`属性阻止触摸事件传递 在需要防止触摸事件穿透的元素上添加`catchtouchmove`属性，可以阻止触摸事件在该元素中传递。 例如： ```html <view catchtouchmove> <!-- 防止触摸事件穿透的元素内容 --> </view> ``` 2. 使用`catchtap`属性阻止点击事件传递 与`catchtouchmove`类似，使用`catchtap`属性可以阻止点击事件在该元素中传递。 例如： ```html <view catchtap> <!-- 防止点击事件穿透的元素内容 --> </view> ``` 3. 使用 `cover-view` 和 `cover-image` 组件 `cover-view` 和 `cover-image` 组件可以覆盖在其他组件上面，不会响应触摸事件，从而解决触控穿透问题。 例如： ```html <view> <!-- 需要防止触控穿透的元素 --> </view> <cover-view> <!-- 覆盖在上面的元素，不会响应触摸事件 --> </cover-view> ``` 以上是解决微信小程序滑动窗口触控穿透问题的几种方式，可以根据具体情况选择不同的方法进行解决。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值