scroll-view在uniapp中隐藏滚动条

最新推荐文章于 2025-05-29 15:25:12 发布

原创最新推荐文章于 2025-05-29 15:25:12 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端

vue 同时被 3 个专栏收录

38 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍如何在scroll-view组件中通过CSS隐藏滚动条，并保持内容无缝显示。重点讲解了`.scroll`和`.nav`样式设置，以及如何使用`white-space: nowrap`和`inline-block`来实现导航栏的布局优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在scroll-view中加入以下代码

::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		}

附上完整代码

<scroll-view class="scroll" scroll-x show-scrollbar >
			<view class="nav"  v-for="(item,index) in navs" :key="index">
			<text>{{item.title}}</text>
			</view>
	</scroll-view>

数据就不展示了

.scroll{
		::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		}
		white-space: nowrap;
		.nav{
			display: inline-block;
			padding:0 30rpx;
			text{
			}
		}
	}