uni-app使用vantUI的van-swipe-cell滑动单元格

uni-app使用vantUI的van-swipe-cell滑动单元格

<checkbox-group @change="checkboxChange">
	<view v-for="(item,index) in productList" :key="index">
        <!-- 我的项目需求只需要一个左滑右边显示删除键,如果需要右滑左边也显示按钮如下 -->
        <!-- <van-swipe-cell right-width="65" left-width="65"> -->
		<van-swipe-cell right-width="65">
		  	<!-- 如果需要右滑左边也显示按钮如下,左边加一个插槽 -->
		  	<!-- <view slot="left">选择</view> -->
			<van-cell-group>
				<checkbox></checkbox>
				<van-card :num="item.num" :price="parseFloat(item.price).toFixed(2)" :desc="item.desc" :title="item.title" :thumb="item.thumb">
					<!-- 商品中的标签开始 -->
					<template #tags>
						<van-tag plain type="danger">标签</van-tag>
						<van-tag plain type="danger">标签</van-tag>
					</template>
					<!-- 商品中的标签结束 -->
					<!-- 商品中的步进器开始 -->
					<template #footer>
						<van-stepper />
					</template>
					<!-- 商品中的步进器结束 -->
				</van-card>
			</van-cell-group>
			<view slot="right" @click="onClose(index)">删除</view>
		</van-swipe-cell>
	</view>
</checkbox-group>

样式调整
在style标签中写如下代码

.van-swipe-cell__right {
		display: inline-block;
		width: 65px;
		height: 100%;
		font-size: 15px;
		line-height: 134px;
		color: #fff;
		text-align: center;
		background-color: #f44;
	}