uniapp实现左右滑动展示功能

首先说一下为什么要发布这个板块的内容和停更的原因：

1.首先这段时间接手了 uni 的项目，并且有自己使用到的这部分内容

2.之前有在gpt上搜索过这类的东西，但是它讲的有点啰里啰唆的（无心看）

3.工作原因，几乎三天两头都在加班，下班之后没有精力去处理这些东西（还是懒）

话不多说 直接演示代码！(观看顺序 ==>>展示效果图==>>代码结构==>>重点总结==>>复制代码 )

效果图:

我这边是结合的 scroll-view 来实现的这个功能 使用这个标签进行一个包裹

总结：
最主要的就是 scroll-x=“true” 然后他的css设置上white-space: nowrap这个属性 就可以开启
接下来子级添 display:inline-block
这两步就可以实现你想要的结果了    （剩下的就自己调一下吻合自己的样式就可以了）
 

当然了 码农嘛  最主要的还是C V ：

	<scroll-view class="bottom-box" scroll-x="true">
				<view @click="handleClick(item, index)" :class="activeI === index ? 'vip-pay' : 'vip-nopay'" v-for="(item, index) in moneyList" :key="index">
					<view class="font-24">{{ item.typeName }}</view>
					<view class="font-50 font-bold padding-tb-16">￥{{ item.price }}</view>
					<view class="delete font-24 padding-bottom-14">原价￥{{ item.srcPrice }}</view>
					<view class="font-24 padding-top-40">{{ item.remark }}</view>
				</view>
			</scroll-view>

 

.bottom-box {
		padding: 0 30rpx;
		white-space: nowrap;
		.vip-pay {
			color: #5b2d00;
			display: inline-block;
			padding-top: 50rpx;
			width: 343rpx;
			height: 353rpx;
			text-align: center;
			margin-right: 20;
			background-image: url('http://dali-jiaoyou.oss-cn-guangzhou.aliyuncs.com/upload/2023-09-15/20230915141214538157.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.delete {
				text-decoration: line-through;
			}
		}
		.vip-nopay {
			color: 333;
			display: inline-block;
			padding-top: 50rpx;
			width: 343rpx;
			height: 353rpx;
			text-align: center;
			margin-right: 20;
			background-image: url('http://dali-jiaoyou.oss-cn-guangzhou.aliyuncs.com/upload/2023-09-15/20230915141213953402.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.delete {
				color: 999;
				text-decoration: line-through;
			}
		}
	}