一、引入組件

1. 通過npm方式，（此方法比較復雜些）?？梢酝ㄟ^npm方式下載構建，npm包名為weui-miniprogram

2. 通過頁面按需下載

本文選擇第二種方式

二、將下載的壓縮包解壓，導入到小程序中（解壓的目錄為weui-miniprogram）

image.png

三、在page里面新建一個頁面，列如test文件夾，在index.wxss里面引入weui.wxss

@import '/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

四、index.json 文件中引入組件

{
  "usingComponents": {
    "mp-cells": "/weui-miniprogram/cells/cells",
    "mp-cell": "/weui-miniprogram/cell/cell",
    "mp-slideview": "/weui-miniprogram/slideview/slideview"
  }
}

五、index.wxml文件中復制以下代碼

<view class="page">
    <view class="page__hd">
        <view class="page__title">Slideview</view>
        <view class="page__desc">左滑操作</view>
    </view>
    <view class="page__bd">
      <view class="weui-cells">
          <mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
              <mp-cell value="左滑可以刪除" footer="說明文字"></mp-cell>
          </mp-slideview>
      </view>
    </view>
</view>

六、index.js文件中編寫相應的操作即可

Page({
  onLoad: function(){
      this.setData({
          //icon: base64.icon20,
          slideButtons: [{
            text: '普通',
            src: '/page/weui/cell/icon_love.svg', // icon的路徑
          },{
            text: '普通',
            extClass: 'test',
            src: '/page/weui/cell/icon_star.svg', // icon的路徑
          },{
            type: 'warn',
            text: '警示',
            extClass: 'test',
              src: '/page/weui/cell/icon_del.svg', // icon的路徑
          }],
      });
  },
  slideButtonTap(e) {
      console.log('slide button tap', e)
  }
});

效果：

image.png

image.png