uniapp滚动条

最新推荐文章于 2024-08-28 20:12:52 发布

33455432

最新推荐文章于 2024-08-28 20:12:52 发布

阅读量440

点赞数

文章标签： uni-app css css3

本文链接：https://blog.csdn.net/weixin_38999134/article/details/130222590

版权

App.vue里面添加

// *定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar
	{
		width: 10upx!important;
		height: 10upx!important;
		background-color: #F5F5F5;
	}
 
	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track
	{
		// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
		background-color: #fff;
	}
 
	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb
	{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
		background-color: #bbb;
	}

使用

<scroll-view style="height: 200rpx;"  :scroll-y="true">
　　<view style="width: 100%;">
				<view class="" v-for="(item,index) in fuzailist" :key="index">
					<view>{{item.loadRateAssetName}}</view>
					<progress :percent="item.loadRateValue" show-info active stroke-width="15" activeColor='rgb(255,255,0)' backgroundColor="#D5D5D5" border-radius='25'/>
				</view>
	　</view>
</scroll-view>