uniapp 使用overflow-y 安卓不生效问题

最新推荐文章于 2024-08-19 16:56:59 发布
最新推荐文章于 2024-08-19 16:56:59 发布
阅读量3.3k 收藏 1
点赞数 3
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_brave/article/details/115368468
版权

使用uview的模态框组件u-modal显示内容过长，于是添加了一个overflow-y:auto让内容超出盒子高度可以上下滚动，运行后发现在h5端没有问题，安卓只超出隐藏不能滚动。
方案：
可以使用uni的scroll-view组件

	<u-modal v-model="show" title="提示" show-cancel-button>
			<scroll-view scroll-y="true">
				<view v-html="content" style="padding: 0 30rpx;"></view>
			</scroll-view>
		</u-modal>

运行之后没有问题

A_Brave
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
uni-app——在 uni-popup 中设置overflow-y: scroll失效
qq_43201350的博客
02-13 434
uni-app——在 uni-popup 中设置overflow-y: scroll失效
移动端webapp支持overflow
12-20
移动版游戏器不支持overflow:auto，即多余内容隐藏，并能通过手指拉动来滚动内容。目前有很多模拟这种效果的js库，如iScroll。但经项目测试，iscroll在很多浏览器中有明显的性能问题。根据isSCROLL改写的
uniapp滚动overflow-y: scroll失效问题
m0_62152730的博客
04-13 5198
在uni-popup使用overflow：scroll失效问题。 原因：uni-popup最外层设置了@touchmove.stop.prevent="clear"，禁止内部滑动，导致滑动没有效果。 结果：去掉@touchmove.stop.prevent 即可。
css滚动条设置（选择器）
weixin_49934623的博客
11-18 980
::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. ::-webki
uni-app的swiper组件设置overflow: hidden不生效
dghgjuyhuoyho的博客
11-25 1356
问题:在小程序里使用swiper组件制作轮播图，给父元素设置了固定宽高，样式圆角border-radius，定位position: relative，超出隐藏overflow: hidden，在安卓机正常显示，但是在ios上圆角不能显示，原因是这个超出隐藏没有生效，所以需要在父元素在添加这四行代码。 backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -
手机端局部滚动问题 overflow-y:auto|scroll无效的解决办法
热门推荐
xingbipai5492的博客
12-25 2万+
手机端局部滚动问题 overflow-y:auto|scroll无效，使用iscroll解决，发现部分安卓手机还是不支持。 最终，使用的Swiper插件，模拟局部滚动效果实现的，比isscroll好用。（测试的时候，需要把应用软件卸载，重新安装一遍就可以了。） 代码如下： &lt;div class="big_box"&gt; &lt;div class="swiper-containe...
CSS中overflow-y: visible;不起作用的原因分析及解决方法
09-22
小编最近遇到这样的需求，移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法，需要的朋友参考下吧
overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动
07-09
) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。 用法 假设您没有为您的网站使用特别奇特的架构，只需将 repo 中的文件放入...
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
09-25
值得一提的是，CSS3中的overflow属性也可以一次性指定overflow-x和overflow-y的值，使用逗号分隔，如overflow: scroll auto;。这为开发者提供了更多的便利和控制。 综上所述，通过适当地使用overflow-x和overflow-y...
关于HTML下overflow-y:auto无效、清除HTML默认边距、解决去除手机访问网页时的左右多余空白的三个方法汇总
sinolzeng的专栏
11-22 1万+
在html中，如果想让某个子DIV出现over-flow
[uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto；
iOSTianNan的博客
09-05 1301
记录一个css技巧。
导致uni-app项目在PC网页上面可以用滑轮上下滚动，但是无法用按下鼠标拖拽以及手机端也无法用手指上下滑动的原因？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-27 715
原因1：滑动区域overflow: hidden;或overflow-y: hidden;了 原因2：滑动区域设置了pointer-events: none; 原因3：pages.json对应页面设置了"disableScroll": false //不允许滑动
scroll-view scroll-y上下滑动失效
到底要什么姿态，才不会显得我在使坏。
11-27 1529
如果我们高度是动态的，那我们可以动态给scroll-view一个高度即可。注意高度不要和相应元素高度一致，不然也是无法滚动的。在uniapp打包成小程序部署后如下代码，我们添加了 scroll-y但是无法上下滑动。滚动的条件必须是设定固定高度，这样才能滚动。
uniapp 去除overflow-x overflow-y 产生的滚动条
最新发布
小菜鸡，努力中~~
08-19 118
uniapp 小程序去除overflow带来的滚动条。
解决uniapp的 swiper 组件的随着指示点添加背景宽度不随着内容添加而自动扩大问题，而是溢出。
FUFCY的博客
09-30 314
uniapp的 swiper 组件的指示点
微信小程序中overflow:auto无效使用滚动解决
qq_34631220的博客
04-19 2806
<scroll-view style="height: 660rpx;" scroll-y="true"> 内容 </scroll-view>
解决uniapp使用uView框架里u-popup组件后，一个盒子内容超出屏幕真机滚动不了问题，模拟器可以滚动。
FUFCY的博客
10-11 4587
使用u-popup内容超出滚动不了问题
uni-app使用uview遮罩、模态框，滑动遮罩层使底层的page页面也跟随滑动BUG解决办法
dengyonglei的博客
05-22 550
uni-app使用uview遮罩、模态框，滑动遮罩层使底层的page页面也跟随滑动BUG解决办法
uniapp swiper中的scroll-view无法滚动的问题
摩羯座de杰杰陆的博客
05-10 1698
uniapp swiper中的scroll-view无法滚动的问题问题现象 问题现象 红色框中的部分是swiper中的内容，发现使用了scroll-view但是无法滚动。
uniapp 使用了overflow-y: scroll; 如何做分页效果
06-02
如果你在uniapp中使用了 `overflow-y: scroll;` 属性，实现了滚动效果，那么可以通过监听滚动事件，来实现分页效果。 具体实现步骤如下： 1. 在页面中添加一个滚动容器，例如： ``` <view class="scroll-container" style="height: 100vh; overflow-y: scroll;"> <view class="list-item" v-for="(item, index) in items" :key="index">{{ item }}</view> </view> ``` 2. 在页面的 `data` 中添加一个变量 `pageNum`，用于记录当前页码，例如： ``` data() { return { items: [], // 数据列表 pageNum: 1, // 当前页码 } }, ``` 3. 在页面中使用 `onScrollToLower` 事件监听滚动到底部的事件，例如： ``` <view class="scroll-container" style="height: 100vh; overflow-y: scroll;" @scrolltolower="loadMoreData"> <view class="list-item" v-for="(item, index) in items" :key="index">{{ item }}</view> </view> ``` 4. 在 `loadMoreData` 方法中，根据当前页码加载对应的数据，并将页码加1，更新 `pageNum` 变量，例如： ``` methods: { loadMoreData() { // 根据当前页码加载对应的数据 const newData = loadData(this.pageNum); this.items = this.items.concat(newData); // 将页码加1，更新 pageNum 变量 this.pageNum += 1; } }, ``` 5. 在 `loadData` 方法中，根据传入的页码，加载对应的数据，例如： ``` function loadData(pageNum) { // 根据 pageNum 加载对应的数据 const data = []; for (let i = 0; i < 10; i++) { data.push(`Item ${(pageNum - 1) * 10 + i + 1}`); } return data; } ``` 6. 最后，根据你的实际情况，可能还需要在页面加载时，先加载第一页的数据，例如： ``` onLoad() { // 加载第一页的数据 const newData = loadData(this.pageNum); this.items = this.items.concat(newData); // 将页码加1，更新 pageNum 变量 this.pageNum += 1; } ``` 通过以上步骤，即可实现基于滚动容器的分页效果。当滚动到底部时，会自动加载下一页的数据。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值