uniapp 左右滚动盒子效果怎么做

你可以使用uni-swipe-action组件实现左右滚动盒子效果。具体步骤如下：

1. 在template中使用uni-swipe-action组件，设置left-width和right-width属性为需要展示的左右滚动区域的宽度。

<view class="container">
	<view class="item" v-for="(item, index) in list" :key="item.id">
		<uni-swipe-action :left-width="100" :right-width="100">
			<!-- 左滑区域 -->
			<view class="left-area">左滑区域</view>
			<!-- 内容区域 -->
			<view class="content-area">内容区域</view>
			<!-- 右滑区域 -->
			<view class="right-area">右滑区域</view>
		</uni-swipe-action>
	</view>
</view>

2. 在style中设置container和item的样式，实现滚动盒子的效果。

.container {
	display: flex;
	flex-wrap: wrap;
	overflow-x: scroll;
	height: 200rpx;
}

.item {
	width: 200rpx;
	height: 200rpx;
	margin-right: 20rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
}

.left-area {
	width: 100rpx;
	height: 100%;
	background-color: #f60;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10rpx 0 0 10rpx;
}

.content-area {
	width: calc(100% - 200rpx);
	height: 100%;
	background-color: #fff;
}

.right-area {
	width: 100rpx;
	height: 100%;
	background-color: #00a0e9;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 10rpx 10rpx 0;
}

以上是使用uni-swipe-action组件实现左右滚动盒子效果的方法，希望对你有所帮助。