技術標籤：微信小程式小程式jsjavascript前端

微信小程式Slideview和cell的用法和使用：

提示：左滑刪除元件，基礎庫 2.4.4 開始支援：

使用方法：

微信UI擴充套件元件庫基於小程式自定義元件構建，在使用擴充套件元件庫之前要在全域性json中引入擴充套件庫.
（1）這裡我們通過 useExtendedLib 擴充套件庫 的方式引入，這種方式引入的元件將不會計入程式碼包大小

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}
 

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

<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
  <mp-cell >
    <view slot="icon">左側圖示</view>
    <view slot="">內容</view>
    <view slot="footer">右側區域slot</view>
  </mp-cell>
 

</mp-slideview>

Page({
    onLoad: function(){
        this.setData({
            slideButtons: [{
              text: '普通',
            },{
              text: '普通',
              extClass: 'test',
            },{
              type: 'warn',
              text: '警示',
              extClass: 'test',
            }],
        });
    },
    slideButtonTap(e) {
        console.log('slide button tap', e.detail)
    }
});

左滑效果：