一、引入組件
1. 通過npm方式欠橘，（此方法比較復(fù)雜些）矩肩。可以通過npm方式下載構(gòu)建肃续，npm包名為weui-miniprogram
2. 通過頁面按需下載
本文選擇第二種方式
二黍檩、將下載的壓縮包解壓，導(dǎo)入到小程序中（解壓的目錄為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文件中復(fù)制以下代碼
<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文件中編寫相應(yīng)的操作即可
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
