小程序P154 09.购物车页面-商品列表-实现滑动删除功能

①改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代码块快速生成基本的 UI 结构）：
<!-- 商品列表区域 -->
<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="swipeActionClickHandler(goods)">
<my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
②在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：

data() {
return {
options: [{
text: '删除',
style: {
backgroundColor: '#C00000'
}}]}}
③在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：
// 点击了滑动操作按钮
swipeActionClickHandler(goods) {
console.log(goods)
}
④美化 my-goods.vue 组件的样式：
.goods-item {
width: 750rpx;
box-sizing: border-box;
display: flex;
padding: 10px 5px;
border-bottom: 1px solid #f0f0f0;
}