uniapp scroll-view显示滚动条

江拥羡橙

已于 2023-09-09 07:37:30 修改

阅读量2.7k

点赞数 9

分类专栏： # uniapp 前端问题解决汇总文章标签： uni-app css css3

于 2023-07-31 10:18:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37215621/article/details/132016858

版权

前端问题解决汇总同时被 2 个专栏收录

44 篇文章 ¥9.90 ¥99.00

订阅专栏

uniapp

4 篇文章

订阅专栏

在这里插入图片描述
在style中添加样式：

	::v-deep ::-webkit-scrollbar {
   
		/* 滚动条整体样式 */
		display: block;
		width: 10rpx !important;
		height: 10rpx !importa

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

江拥羡橙

关注关注

9
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

ScrollView(滚动条)

shiwei0813的博客

03-22

725

我们可以看到类的结构如下：原来是一个FrameLayout的容器，不过在他的基础上添加了滚动，允许显示的比实际多的内容！另外，只能够往里面放置，可以是单一的组件，又或者一个布局包裹着的复杂的层次结构！一般对于可能显示不完的情况，我们可以直接在布局的外层套上一个: ScrollView或者HorizontalScrollView！就这么简单~！

uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！

王二红

04-01

4478

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io

1 条评论您还未登录，请先登录后发表或查看评论

修改滑动条的颜色

前端菜鸟

04-12

942

代码例子直接拿走 /*修改滚动条样式*/ /*修改滚动条样式*/ /*修改滚动条样式*/ ::-webkit-scrollbar { width: 8px; height: 100%; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shad...

Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发

热门推荐

03-08

1万+

官方示例：https://uniapp.dcloud.io/component/scroll-view 效果图：实现代码： <template> <view> <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" scroll-with

uniapp 自定义scroll-view滚动条

weixin_47517731的博客

01-15

1518

【代码】uniapp 自定义scroll-view滚动条。

微信小程序 scroll-view隐藏滚动条详解

01-03

一：scroll-view隐藏滚动条 在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js...

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

10-17

2. 为了解决这个问题，可以考虑使用一种“野路子”方法，即在scroll-view外包裹一个高度小于scroll-view高度的容器，这样可以截断滚动条的显示部分，从而达到隐藏滚动条的效果。通过调整外部容器的高度，并结合适当...

小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法

01-04

总之，解决`scroll-view`与CSS左右滑动超出部分背景颜色不显示的问题，需要对小程序的渲染机制、CSS布局以及滚动条样式有深入的理解。通过细致的排查和合理的代码编写，可以确保用户在滑动浏览时获得良好的视觉体验...

微信小程序scroll-view的滚动条设置实现

10-15

主要介绍了微信小程序scroll-view的滚动条设置实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

【uniapp】小程序开发8：滚动组件scroll-view

不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员

12-11

7162

我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。这个时候，就可以使用uniapp提供的滚动组件scroll-view。

关于uniapp中scroll-view的滑动条常在的方法

rzh554的博客

07-24

806

将上面的代码放入style标签里面就可以看到滑动条显示出来了。

uni设置scroll-view滚动条样式

zcy1005的博客

10-12

1312

uni设置scroll-view滚动条样式

uni-app中scroll-view内容没有超出高度出现滚动条

autumn_later的博客

07-12

1166

网上找了很多都答案都说在scroll-view内部第一个控件添加为试了还是不行，后来试了下又在scroll-view内部最后的位置添加了一样的代码发现终于可以了。在scroll-view内部第一个和最后一个控件设置为

微信小程序scroll-view显示滚动条

LRQQHM的博客

05-11

669

试过网上的直接修改样式的方法不行，自己写一个滚动条定位上去。

uniapp scroll-view.滚动条设置

qq_42966789的博客

09-20

2151

uniapp scroll-view 滚动条设置

uni-app - 去除 “＜scroll-view＞“ 超出高度出现的滚动条（全局或局部均可）

王二红

08-12

3987

uni-app-去除``超出高度出现的滚动条（全局或局部均可），uni-appscroll-view怎么去除滚动条，uniapp去除scroll-view滚动条的方法，uni-appscroll-view取消滚动条显示，uniapp去除滚动条的方法，uni-appcss去掉容器滚动条，uniapp去除滚动条近期在做一个uniapp项目,进行的时候发现内容超出后右侧滚动条难以隐藏。...