官网地址：uni-app官网 (dcloud.net.cn) 最终效果如下图：
代码语言：javascript复制滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item 属性名类型可选值默认值是否必填说明left-optionsArray/Object--否左侧选项内容及样式right-optionsArray/Object--否右侧选项内容及样式
下面的 block 元素，循环出所有的商品元素
<!-- uni-swipe-action 是最外层包裹性质的容器 -->
<uni-swipe-action>
<block v-for="(goods, i) in cart" :key="i">
<!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
<uni-swipe-action-item :right-options="options" @click="onClick(goods)">
<!-- ================================== -->
<view style="height: 300rpx;background-color: pink;">
根据自己需要，配置 需要的样式
</view>
<!-- ================================== -->
</uni-swipe-action-item>
</block>
</uni-swipe-action>代码语言：javascript复制配置option项、所有商品对象： 参数类型是否必填说明textString是按钮的文字styleObject否按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：14px
data() {
return {
// 这个是所有商品对象
cart: [{
goods_id: 1,
},{
good_id: 2
}],
// 这个是滑动后的配置项
options: [{
text: '删除', // 显示的文本内容
style: {
backgroundColor: '#C00000' // 按钮的背景颜色
}
}]
}
},可用的事件：【我们需要的是滑动点击删除，用了 @click 事件，并传递 货品 id】 事件称名说明返回值@click点击选项按钮时触发事件e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)@change组件打开或关闭时触发left:左侧 ，right：右侧，none：关闭
得到下面的效果图：
代码语言：javascript复制使用 filter 方法，使返回值为 不存在 刚刚传进来滑动删除 对应货品id 的对象
methods: {
// 根据 Id 从购物车中删除对应的商品信息
onClick(goods_id) {
// 调用数组的 filter 方法进行过滤
this.cart = this.cart.filter(x => x.goods_id !== goods_id)
},
}
