uniapp实现横向滚动样式条

ゞ浴缸里的玫瑰 2024-03-31 09:19 107阅读 0赞

## uniapp实现横向滚动样式条 ##

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

**运行代码**：

<template>
    	<view class="content">
    		<view class="home">
    			<scroll-view scroll-x class="navscroll" > 
    					<view class="item" v-for="item in 10"> 
    						国内
    					</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>

**运行结果**：  
![在这里插入图片描述][345bf1fc4a7c4780aa370bd4c6cdc871.png]

[345bf1fc4a7c4780aa370bd4c6cdc871.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/50b609c6f39649bca0c3bd2a224eb468.png