小程序左滑删除如何实现

微信小程序如何实现左滑删除的功能呢

https://developers.weixin.qq….

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html

Slideview
左滑删除组件，基础库 2.4.4 开始支持，如下图所示。

引入组件
在 page.json 中引入组件

{
  "usingComponents": {
    "mp-slideview": "../../components/slideview/slideview",
    "mp-cells": "../../components/cells/cells",
    "mp-cell": "../../components/cell/cell"
  }
}
示例代码
<!--WXML示例代码-->
<mp-cells ext-class="my-cells" title="带说明的列表项">
    <mp-cell value="标题文字" footer="说明文字"></mp-cell>
    <mp-cell>
        <view>标题文字（使用slot）</view>
        <view slot="footer">说明文字</view>
    </mp-cell>
    <mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
        <mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
    </mp-slideview>
    <mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap">
        <mp-cell value="左滑可以删除（按钮Button）" footer="说明文字"></mp-cell>
    </mp-slideview>
</mp-cells>
// page.js示例代码
Page({
    onLoad: function(){
        this.setData({
            icon: base64.icon20,
            slideButtons: [{
              text: '普通',
              src: '', // icon的路径
            },{
              text: '普通',
              extClass: 'test',
              src: '', // icon的路径
            },{
              type: 'warn',
              text: '警示',
              extClass: 'test',
              src: '', // icon的路径
            }],
        });
    },
    slideButtonTap(e) {
        console.log('slide button tap', e.detail)
    }
});