【vue2+uniapp】使用scroll-view布局时scroll-x=“true“样式展示

在scroll-view加入overflow: hidden;white-space: nowrap;

1、布局

<template>
	<view class="content">
		<scroll-view class="tab-box" scroll-x="true">
			<view class="current">全部商品</view>
			<view class="">1商品</view>
			<view class="">2商品</view>
			<view class="">3商品</view>
			<view class="">4商品</view>
		</scroll-view>
		<view class="card-item" v-for="item in 3">
			<view class="card-list">
				<view class="card-money">
					<text>消费金额</text>
					<text class="price">￥100.00</text>
				</view>
				<view class="card-money">
					<text>消费种类</text>
					<text>可口可乐</text>
				</view>
				<view class="card-money">
					<text>升数</text>
					<text>4.11</text>
				</view>
				<view class="card-money">
					<text>时间</text>
					<text>2021-12-12 18:00:00</text>
				</view>
				<view class="card-money">
					<text>员工卡号</text>
					<text>88</text>
				</view>
				<view class="card-money">
					<text>员工姓名</text>
					<text>XXX</text>
				</view>
			</view>
			<view class="pay-card">
				<text>移动支付</text>
				<text>会员付</text>
				<text>更多支付</text>
			</view>
		</view>
	</view>
</template>

2、样式

<style lang="less">
	page {
		background: #F5F7FA;

		.tab-box {
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 16rpx 32rpx;
			overflow: hidden;
			white-space: nowrap;
			box-sizing: border-box;

			view {
				display: inline-block;
				padding: 0 24rpx;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 8rpx;
				border: 2rpx solid #C4C4C4;
				color: #C4C4C4;
				text-align: center;
				margin-left: 16rpx;

				&.current {
					background: #FF5152;
					border-radius: 16rpx;
					color: #FFFFFF;
				}

				&:first-child {
					margin-left: 0;
				}
			}
		}

		.card-item {
			width: 686rpx;
			height: 560rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 16rpx 32rpx;
			// box-sizing: border-box;
			.card-list {
				padding: 32rpx 32rpx;
				view {
					display: flex;
					justify-content: space-between;
					margin-bottom: 8rpx;
					.price{
						color: #FF5152;
					}
					text {
						height: 60rpx;
						line-height: 60rpx;
						&:first-child {
							font-size: 28rpx;
							font-weight: 400;
							color: #999999;
						}
						&:last-child {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							
						}
					}
				}
			}
				.pay-card{
					display: flex;
					align-items: center;
					text-align: center;
					border-top: 2rpx solid #F2F2F2;
					text{
						width: 229rpx;
						height: 96rpx;
						line-height: 96rpx;
						font-size: 28rpx;
						font-weight: 500;
						&:nth-of-type(1){
							color: #FF5152;
							border-right: 2rpx solid #F2F2F2;
						}
						&:nth-of-type(2){
							color: #FE6A2E;
							border-right: 2rpx solid #F2F2F2;
						}
						&:nth-of-type(3){
							color: #2F8DFF;
						}
					}
				}
		}
	}
</style>