uniapp scroll-view横向滚动效果demo（整理）

效果图：

<template>
	<view class="navTab">
		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<view class="tabBox">
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
				<view class="tabList">
					<view class="list"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="scss" scoped>
	.navTab {
    
    
		width: 95%;
		margin: 0 auto;
		.tabBox {
    
    
			width: 100%;
			display: flex;
		}
		
		.tabList {
    
    
			margin: 10rpx;
			.list {
    
    
				display: inline-block;
				width: 200rpx;
				height: 100rpx;
				background: #007AFF;
				border: 1rpx solid red;
			}
		}
		
		.tabList:first-child {
    
    
			margin-left: 0;
		}
	}

	
</style>

转载：感谢分享-具体详情请查看原文链接
原文链接：https://blog.csdn.net/babyxuqian/article/details/120847653