Taro滚动穿透

最新推荐文章于 2024-04-21 07:45:00 发布
最新推荐文章于 2024-04-21 07:45:00 发布
阅读量1.7k 收藏
点赞数
分类专栏： 坑 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42890213/article/details/110480496
版权

正常情况下使用AtFloatLayout一般情况是不会有滚动穿透，出现了，百度了不少办法，发现都没有用，应该是自己代码太烂了，我的情况和解决办法：


  • 被穿透的底层视图为高度自适应 AtFloatLayout中还有个滚动窗ScrollView AtFloatLayout中的非ScrollView会滚动穿透.

    土办法：把穿透的View换成ScrollView,并设置高度

    在这里插入图片描述

飘~~~
关注
专栏目录
解决h5页面弹窗滚动穿透
cxy980626的博客
12-31 1804
问题描述：在页面打开弹窗，弹出遮罩层，在滑动页面时会导致弹窗底部的页面跟着一起滚动 解决方案 一、适用于弹窗文案较少且不需要滚动的场景，如图： // 方法：直接在遮罩层（弹窗）上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了。 <div class="modal" @touchmove.prevent></div> 二、适用于弹窗文案多且支持滚.
Taro中的坑
最新发布
qq_33715850的博客
07-18 395
Taro中的坑
taro项目小程序场景下scrollview引发的问题汇总
LittleMoon_lyy的博客
07-16 2837
小程序scroll-view的踩坑记录
Taro 小程序做蒙层，蒙层下页面会滚动。滚动穿透问题
weixin_46662539的博客
08-12 3098
最近在写小程序的时候，需要手写一个拨打打电话的功能，点击查看弹出蒙层展示手机号，点击电话号码进行拨打电话。 前面拨打电话API都挺顺利，后来忽然发现蒙层下的页面依然还能滚动。一开始以为层级问题，调整层级一直没什么效果。 于是开始查文档，发现文档中提示 于是开始一个个方法进行测试。第一种方法不适合，因为当前页面滚动元素没办法给到高度，会有问题，就不细说了。 开始第二种办法，我的项目还是使用Taro.2,所以使用catchtouchmove属性，如果为Trao3,可使用catchMove属性。 <Vie
解决Taro在支付宝小程序中阻止滚动穿透的问题，钉钉小程序阻止滚动穿透
m0_57261384的博客
11-23 815
问题描述：在支付宝小程序真机预览中，使用 Picker 选择器的时候，滑动其中的滚动项，因为冒泡事件的原因会触发外层盒子的滚动，试过阻止冒泡事件，没用，样式阻止外层滚动也没用
Taro阻止滚动穿透
岁月如歌去，十年弹指间
07-17 885
在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容。但是地图组件本身就是可以滚动的，即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。针对taroUI提供的弹框组件效果很好，弹框不需要滚动直接使用，需要滚动的内部写scroll-view。需要真机预览或者体验版查看，模拟器上看不出效果。Taro 3.0.21 版本开始支持。
解决弹出框滚动穿透的问题（问题是body也会滚动）
weixin_34184158的博客
01-19 705
参考https://uedsky.com/2016-06/mobile-modal-scroll/ 感谢分享 案例页面：view-source:https://uedsky.com/demo/modal-scroll.html 第一步：给body加上个css类别样式 body.modal-open { position: fixed; width: 1...
scroll 滚动穿透的解决方案
沙骑马
08-24 1617
scroll 滚动穿透的解决方案 项目场景： 适用所有页面有滚动且有弹出的情况，禁止弹层上滑动行为触发底层页面的滚动 问题描述： 页面有滚动条，当有弹层弹出时，弹出层上touchmove事件会触发底层页面滚动 解决方案： scrollview的高度固定，内部view的高度自由撑开，大于scrollview的高度时就会出现滚动条 <ScrollView scrollY style={height}> <View>需要滚动的内容</View> </Scr
taro scrollToItem
08-10
此外，Taro3还提供了事件机制和属性绑定的功能，可以帮助我们阻止滚动穿透和精简属性。 总结起来，taro scrollToItem是Taro3中用于滚动到指定项的方法，通过调用该方法可以实现在虚拟列表中滚动到指定项的功能。...
微信小程序-picker组件重新封装 增加disabled属性--下文
q1ngqingsky的博客
01-21 1964
点击这里查看：微信小程序-picker组件重新封装 增加disabled属性--上文https://blog.csdn.net/q1ngqingsky/article/details/122617599
一个可以自己选择颜色的配色卡实现——ColorPicker【ColorDot】
qq_36070003的博客
05-23 1098
最近看到一个颜色选择网站，网站地址点这里。觉得很有趣，想自己实现一下，顺便学习一下canvas。 没有看源码，全部是自己设计的，预计两天完成吧 思路和实现 调色盘的实现 使用canvas画一个渐变色画布，其中x轴是色度，y轴是明暗度，官网其实还有一个z轴，是鼠标滚动选择饱和度，这里先不考虑。 首先，先做x轴的色盘，相当于做一个类似ps里的选色的彩虹条，思路是创建canvas的渐变对象，从左到右分为六份，是红黄绿青蓝紫这六种颜色，最后又过渡回到红色做一个，代码如下： <canvas class=.
解决弹出层滚动穿透的问题
Harrietjia的博客
03-03 1308
一个棘手的问题：弹出层的滚动穿透，即弹出层滚动，那么被弹出层覆盖的下面的内容区域也会进行滚动。弹出层我是用的view标签然后使用的position:fixed进行的定位；说一下我的解决思路: 一：当弹出层里面无滚动的时候： 可以在遮罩的view标签上定义一个防止事件冒泡的方法： 1 2 3 4 5 6 catchtouch...
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
Embrace924的博客
02-22 2908
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
禁止滚动穿透
A2258908698的博客
08-07 207
问题: 在弹框出现后还是可以滑动,使用了overflow:hidden;没有用,在.canvas_container外层添加view标签,给这个标签添加css也没有用. 解决方法1 这样是可以解决了,但是调试器里一直弹出警告,虽然可以不管,但是看的不爽 解决方法2 这样就可以解决了 ...
Android自定义控件——FloatLayout
monoCuty的专栏
03-18 1294
本文介绍一个好多App都有的布局容器，如图 这种效果在微博，美团，点评上面都有使用，是一种很不错的交互方式。 实现原理：       自定义一个Layout，可以是LinearLayout，RelativeLayout       容器总共有三个部分，HearderLayout最上面的部分，FloatLayout滑动的时候浮动的部分，ContentLayout下面的内容部分，这里我们使
Android 流式布局 FloatLayout自定义控件
chenjianbo的专栏
08-13 1210
实现效果 FloatLayout自定义控件 自定义view继承ViewGroup,重写onMeasure()，onLayout()方法。可根据子元素宽度动态测量宽高 onMeasure() resultWidth = paddingLeft + paddingRight measuredChildCount = 0 for (i in 0 until count) { ...
移动端怎样解决弹窗后滑动穿透的问题
weixin_40425322的博客
07-15 690
移动端滑动穿透
Android开发软键盘遮挡问题汇总
MrQ
08-23 1798
最近好多人在Android开发中都遇到了登录界面或者其他地方,弹出软键盘的时候遮挡按钮或者输入框或按钮的问题,所以在这里集思广益将网上大部分的思路整合一下,贴出来
Taro 自定义 Popup 组件使弹窗滚动事件穿透问题解决方案
weixin_45899614的博客
04-21 751
在用 taro 框架开发小程序组件库，开发 popup 组件时碰到滚动事件穿透的问题，当我滑动 popup 内容时会发现遮罩下的页面也跟着滚动了。一开始使用 touchmove.prevent.stop 阻止事件冒泡和捕获，结果根本没有效果。查阅了官方文档有 catchMove 属性可以禁止穿透。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值