uni横向滑动

			<view class="content-box-scroll" v-show="btnList.length > 0">
				<scroll-view scroll-x style="white-space: nowrap; 100%;">
					<block v-for="(item, index) in btnList" :key="index">
						<view @tap="clickBtnChange(item,index)" class="btn-sty-yel-two" :class="[selectIndex===index ? 'select-bg' : 'no-select-bg']">
							<view class="btn-sty-yel-two-childern">
								{{item.name}}
							</view>
						</view>
					</block>
				</scroll-view>
			</view>

  

<scroll-view scroll-x style="white-space: nowrap; 100%;">
</scroll-view>
.content-box-scroll {
	height: 120rpx;
	display: flex;
	align-items: center;
}
.btn-sty-yel-two {
	display: inline-block; // 非常重要与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。用通俗的话讲,就是不独占一行的块级元素
	height: 60rpx;
	 200rpx;
	border-radius: 5rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	.btn-sty-yel-two-childern {
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
}

.no-select-bg {
border: 1rpx solid #FFFFFF;
color: #FFFFFF;
opacity: 0.8;
}
.select-bg {
color: #5857D7;
background: #FFFFFF;
}

  

原文地址:https://www.cnblogs.com/fdxjava/p/15657761.html