如何在下列代码中插入SwipeCell组件实现滑动删除商品功能。相应代码如下:<view class="goods-card"> <radio disabled="{{ goodsData.amount <= 0 }}" bind:tap="changeChecked" class="goods-card-radio" checked="{{ goodsData.amount <= 0 ? false : goodsData.checked }}" color="#ff6034" /> <van-card custom-class="flo-goods-card" style="flex: 1; height:calc(42vh - 50px)" tag="{{ goodsData.amount > 0 ? '' : '售磬' }}" price="{{ goodsData.price || '' }}" title="{{ goodsData.title || '' }}" thumb="{{ goodsData.showPictures || '' }}"> <view slot="num"> <van-stepper disabled="{{ goodsData.amount <= 0 }}" style="position: absolute; right: 0rpx; top: 75%;" input-width="42rpx" button-size="45rpx" theme="round" bind:change="changeValue" value="{{ goodsData.value }}" step="1" /> </view> <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}"> <view slot="right">删除</view> </van-swipe-cell> </van-card> </view>
时间: 2023-07-19 16:10:24 浏览: 125
可以将 `<van-swipe-cell>` 组件插入到 `<van-card>` 组件中,代码如下:
```
<view class="goods-card">
<radio disabled="{{ goodsData.amount <= 0 }}" bind:tap="changeChecked" class="goods-card-radio" checked="{{ goodsData.amount <= 0 ? false : goodsData.checked }}" color="#ff6034" />
<van-card custom-class="flo-goods-card" style="flex: 1; height:calc(42vh - 50px)" tag="{{ goodsData.amount > 0 ? '' : '售磬' }}" price="{{ goodsData.price || '' }}" title="{{ goodsData.title || '' }}" thumb="{{ goodsData.showPictures || '' }}">
<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
<view slot="right">删除</view>
<view slot="default">
<view slot="num">
<van-stepper disabled="{{ goodsData.amount <= 0 }}" style="position: absolute; right: 0rpx; top: 75%;" input-width="42rpx" button-size="45rpx" theme="round" bind:change="changeValue" value="{{ goodsData.value }}" step="1" />
</view>
</view>
</van-swipe-cell>
</van-card>
</view>
```
需要注意的是,因为 `<van-swipe-cell>` 组件只能包含一个子元素,所以需要将 `<van-stepper>` 组件包裹在一个 `<view>` 元素中,再将其放入 `<van-swipe-cell>` 组件中。同时需要将 `<van-stepper>` 组件的 `slot` 属性设置为 `"num"`,以便正确显示。
阅读全文