uniapp解决使用scroll-view后，页面内容超出页面还存在的页面滚动

最新推荐文章于 2024-04-18 06:53:18 发布
最新推荐文章于 2024-04-18 06:53:18 发布
阅读量927 收藏
点赞数 1
文章标签： uni-app 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74853896/article/details/133144990
版权

这个原因就是需要设置scroll-view的高度

设置好scroll-view的高度，页面的滚动也就自然而然的消失了

注意：scroll-view的高度不易设置为100%或者太大，否则还是会有页面滚动

m0_74853896
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 API 自己看咯    https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122 (此图片来源于网络，如有侵权，请联系删除! ) 有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~ html中 scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;"  必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
uniapp中scrollview隐藏滚动条，安卓和ios
07-21 1848
按照官方文档设置了show-scrollbar为false，但是不起作用，仍然显示滚动条，，，，乌鱼子。随后又加上displaynone;才让ios端起作用。发现web和安卓端起作用了，但是ios不起作用。
uniapp中实现canvas超出屏幕滚动查看（全网唯一可行方案）
LLL3189860667的博客
03-26 641
亲爱的小伙伴，当你需要在uniapp中使用canvas绘制一个超长图，就类似于横向的流程图时，这个canvas超出屏幕部分拖动屏幕查看会变得十分棘手。我查阅了大量资料，甚至是问了无数遍AI，得到的结果只有很敷衍的监听touch,然后计算偏移量，然后重绘。可是，你想想，如果一次绘图里边有成百上千个元素，还有很大的图片，你重绘？1.使用scroll-view嵌套canvas，官网是说不许嵌套的，但是我们可以另辟蹊径，滚动的关键就再这个onTouchMove方法中。
微信小程序scroll-view组件实现滚动动画
08-28
主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
uniapp解决页面滚动条的问题
qq_43640535的博客
08-04 908
解决uniapp页面滚动条的问题
uniapp小程序当页面内容超出时显示滚动条，不超出时不显示---样式自定义
weixin_69666355的博客
01-12 1416
uniapp小程序当页面内容超出时显示滚动条，不超出时不显示---样式自定义
【无标题】 移动端解决高度设为100vh时，页面超出窗口问题
qq_61834864的博客
10-31 5044
移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题
uniapp css width宽度100%导致界面右边超出屏幕或者padding导致出现滚动条
ScottePerk的博客
06-27 2907
这实际上是一个纯粹的css问题，在小屏幕上非常容易出现。原因就是你的view使用了padding，而padding是算自身宽高的，而使用width 100%的时候，就变成了100% width加上padding的内容。所以就会在右边多出一部分内容。解决办法就是设置box-sizing: border-box。默认是box-sizing: content-box;
uniapp 页面溢出滚动条问题（内容高度=页面-header-tabbar）
妄梦久挽的博客
11-08 1258
uniapp 必须遇到的滚动条溢出问题 ！
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
uniapp开发小程序scrollView下拉刷新的状态如何关闭
jornze的博客
06-29 3841
uniapp开发小程序scrollView的下拉刷新状态如何关闭 使用scrollview的下拉刷新有什么注意点
【uniapp滚动穿透】 在u-modal中使用scroll-view底下主页面会跟随滚动
qq_33310436的博客
10-13 2095
uniapp 模态窗 中使用scroll-view 滚动穿透
uniapp中如何隐藏scroll-view的滚动条，字节跳动web前端面试题
最新发布
m0_74931199的博客
04-18 700
11，transform、translate、transition 分别是什么属性？3.我们还可以在App.vue的style里面外部链接base.css 这种办法可以控制所有的滚动条。13，javascript 的垃圾回收机制讲一下,/* 隐藏滚动条，但依旧具备可以滚动的功能 */6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。2，如何实现一个最大的正方形。3，一行水平居中，多行居左。1，判断 js 类型的方式。
记一次uniapp使用scroll-view标签产生的滑动穿透的解决方法
XXCJLRC的博客
10-22 3054
uniapp滑动穿透问题记录
uniapp 页面 内容超过屏幕高度，就会导致产生页面滚动
tengyuxin的博客
09-28 5805
问题是如何动态设置沾满屏幕的高度，我想要flex:auto，这样就很方便。”这个模块，循环100此后，就会超出页面高度，就会产生页面滚动，连带着“所以，在app.vue界面设置 page{ height: 100% }解决思路如下：要给scroll-Y设置一个固定高度，这样就会产生滚动条。”这个模块也跟着滚动。
uniapp 项目中uni-drawer 组件中内容超出样式设置溢出滚动只能滚动但是无法滑动问题
qg2276879379的博客
07-20 1085
在需要滚动的外层换成scroll-view 即可。
uniapp scroll-view横向滚动
06-28
### 回答1： Uniapp中的scroll-view组件可以实现横向滚动。只需要在scroll-view标签中设置属性scroll-x为true即可。例如： ``` <scroll-view scroll-x="true"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> <view class="item">5</view> </scroll-view> ``` 其中，scroll-x属性表示横向滚动，设置为true即可。在scroll-view中放置需要滚动的内容，例如上面的例子中是五个view标签。需要注意的是，如果内容宽度超出了scroll-view的宽度，才会出现横向滚动条。 ### 回答2： UNIAPP是一款基于Vue开发的跨平台应用开发框架，通过它可以轻松构建一些常见的移动应用，比如：微信小程序、H5、APP等。其中scroll-view是常用的一个组件，它可以让内容得以滚动。 scroll-view组件有一个很好的特性：可以设置vertical或者horizontal来控制滚动方向，默认是垂直方向的。 在UNIAPP中通过scroll-view组件实现横向滚动可以使用以下步骤： 1、在template中使用scroll-view组件 2、在scroll-view组件中添加一个名为scroll-x的属性，并将其设置为true，即scroll-x="true"。 3、在scroll-view组件中添加一个名为bindscrolltolower的事件绑定函数，这个函数会在scroll-view滚动到底部的时候被触发。 4、在scroll-view组件中添加一个名为scroll-left的属性并将其设置为0，用于控制横向滚动条的位置。 5、使用一个列表循环的方式来展示横向滚动内容。 6、为了横向滚动内容正常显示，需要在样式文件中设置scroll-view的width为“100%”，同时内部的子元素需要设置display为“inline-block”。 7、通过CSS样式控制列表循环的每一项宽度和高度。 总之，通过scroll-view组件的scroll-x属性和scroll-left属性以及样式控制，可以实现UNIAPP中scroll-view的横向滚动。 ### 回答3： Uniapp是一款基于Vue.js框架开发的跨平台应用开发工具，它可以方便地创建原生应用和H5应用。在Uniapp中使用scroll-view组件可以实现页面的滚动效果。同时，我们还可以设置scroll-view组件实现横向滚动效果。 scroll-view组件具有三个重要属性，分别是direction、scroll-x和scroll-y。其中，direction属性可以设置组件的滚动方向，取值有vertical（垂直方向）和horizontal（水平方向）；scroll-x属性表示是否允许横向滚动；scroll-y属性表示是否允许竖向滚动。我们可以通过组合这三个属性来设置scroll-view组件的滚动方式。 具体实现代码如下： ```html <scroll-view class="scroll-view" scroll-x> <view class="item" v-for="(item, index) in list" :key="index"> {{ item }} </view> </scroll-view> ``` ```css .scroll-view { width: 100vw; height: 100px; white-space: nowrap; } .item { display: inline-block; width: 100px; height: 100px; background-color: #ff0; margin-right: 10px; } ``` 在上面的代码中，我们首先创建一个scroll-view组件，并给它设置了scroll-x属性，表示横向滚动。然后，我们在scroll-view组件内部使用了v-for指令循环遍历一个数据列表，以便动态创建多个item组件。在item组件中，我们设置了相应的样式，以便呈现正确的滚动效果。 总的来说，uniapp的scroll-view组件非常实用，可以轻松创建各种滚动效果。我们只需要通过设置相应的属性来实现不同的滚动方式，无需关心实现细节。如果我们需要实现横向滚动效果，只需简单设置scroll-x属性即可。这为uniapp的开发提供了更多的灵活性和便利性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值