uniapp实现横向滚动样式条

极客李华

已于 2024-02-01 00:52:49 修改

阅读量6.1k

点赞数 5

分类专栏： uni-app学习之旅文章标签： uni-app css 前端

于 2022-11-20 17:43:42 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127951671

版权

uni-app学习之旅专栏收录该内容

19 篇文章 48 订阅

订阅专栏

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-CSDN博客
合作方式：私聊+
这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

uniapp实现横向滚动样式条

简介：本文讲解，uniapp如何实现横向滚动样式条。

运行代码：

<template>
	<view class="content">
		<view class="home">
			<scroll-view scroll-x class="navscroll" > <!-- 设置滚动条方向为横向 -->
					<view class="item" v-for="item in 10"> <!-- 通过for循环生成view -->
						国内
					</view>
			</scroll-view>
			<div class="content">
				<div class="row">每一行新闻</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.navscroll{
	white-space: nowrap; // 设置内容不换行
	height: 100rpx; // 设置滑动栏的高度
	background: #F7F8FA; // 设置滑动栏的颜色
	// 通过渗透来消除状态栏下方的下划线
	/deep/ ::-webkit-scrollbar {
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	.item{
		font-size: 40rpx; // 设置字体大小
		display: inline-block; // 设置为行内块
		line-height: 100rpx; // 设置行高
		padding: 0 30rpx; // 设置外边距
		color:#333; // 设置颜色		
	}
	
}
</style>