小程序左滑删除如何实现

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

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)
    }
});