【uni-app】列表左滑实现商品删除

先去uni-app官网下载操作组件：添加链接描述
商品列表页面：

vue中：列表内容用循环显示，之后用括起来要显示的内容

<view class="goods-detail" v-for="(item,index) in goods" :key="index">
		<delSlideLeft :item="item" :data_transit="{index:index,item:item}" @delItem="delItem">
				<text class="goods-name">{{item.name}}</text>   <!-- 列表内容 -->
		</delSlideLeft>
</view>

script中：

import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
export default {
	components: {
		delSlideLeft,
	},
	data() {
		return {
			goods: [{
				name: "【新鲜营养】密农人家鲜嫩荷兰豆250g/份",
				num: 1,
				flag: true,
				price: 17,
				goodsImage: "../../static/swiper4.jpg"
				}, {
				name: "广西红心火龙果礼盒 单果200~300g 2.5kg/份",
				num: 1,
				flag: true,
				price: 35.8,
				goodsImage: "../../static/product/product4.png"
			}],
		}
	},
		methods: {
		//点击删除按钮事件
		delItem: function(e) {
			let that = this;
			that.goods.splice(e.data.index,1);
			},
		}
}