前两篇小程序左滑删除 movable-view 和 movable-area（一）和小程左滑删除 slide-view（二）已经介绍了左滑删除的实现原理，接下来看下更好的实现方式，微信团队提供的 WeUI 组件 Slideview，并没有使用可移动区域组件 movable-view 和 movable-area 实现，而是直接使用 view 容器实现。
项目源码：https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/slideview
WeUI 样式库的引入的两种方式：
第一种：可以通过npm方式下载构建，npm包名为weui-miniprogram
第二种(推荐)：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
在全局配置文件 app.json 中引入：
{
"useExtendedLib": {
"weui": true
}
}
在需要使用 Slideview 的页面 page.json 中引入组件：
{
"usingComponents": {
"mp-slideview": "weui-miniprogram/slideview/slideview"
}
}
WXML 文件中引用 slideview：
<view class="weui-cells">
<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
<mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
</mp-slideview>
</view>
<view class="weui-cells">
<mp-slideview ext-class="slideViewClass2" buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap">
<mp-cell value="左滑可以删除" footer="图标类型"></mp-cell>
</mp-slideview>
</view>
JS 文件中需要配置左滑的按钮 slideButtons:
Page({
data: {
},
onLoad: function () {
this.setData({
slideButtons: [{
text: '普通1',
src: '/images/icon_love.svg', // icon的路径
}, {
text: '普通2',
extClass: 'test',
src: '/images/icon_star.svg', // icon的路径
}, {
type: 'warn',
text: '警示3',
extClass: 'test',
src: '/images/icon_del.svg', // icon的路径
}],
});
},
slideButtonTap(e) {
console.log(e.detail.index)
}
})
这样即引用了 Slideveiw 组件。
Slideview 实现方式
WXML文件：
<!-- slide-view/slide-view.wxml -->
<wxs module="handler" src="./slideview.wxs"></wxs>
<view class="weui-slideview weui-movable-view {{icon ? 'weui-slideview_icon' : ''}} {{extClass}}" style="width: 100%;height: 100%;">
<view bindtransitionend="{{handler.transitionEnd}}" show="{{show}}" change:show="{{handler.showChange}}" rebounce="{{rebounce}}" change:rebounce="{{handler.rebounceChange}}" duration="{{duration}}" change:duration="{{handler.durationChange}}" change:disable="{{handler.disableChange}}" disable="{{disable}}" change:prop="{{handler.sizeReady}}" prop="{{size}}" bindtouchstart="{{handler.touchstart}}" bindtouchmove="{{handler.touchmove}}" bindtouchend="{{handler.touchend}}" class="weui-slideview__left left" style="width:100%;">
<slot></slot>
</view>
<view class="weui-slideview__right right">
<view class="weui-slideview__buttons" style="height:100%;width:100%;" wx:if="{{buttons && buttons.length}}">
<view wx:for="{{buttons}}" wx:key="index" class='btn weui-slideview__btn__wrp {{item.className}} {{item.extClass}}'>
<view bindtap="{{handler.hideButton}}" data-data="{{item.data}}" data-index="{{index}}" class='weui-slideview__btn'>
<text wx:if="{{!icon}}">{{item.text}}</text>
<image class="weui-slideview__btn__icon" wx:else src="{{item.src}}" />
</view>
</view>
</view>
</view>
</view>
可以看到，微信团队并没有使用可移动区域组件 movable-view 和 movable-area 实现，而是直接使用 view 容器实现。
并且 slideview 使用 wxs 视图脚本，不用与逻辑层通讯，降低了线程的开销，比 js 效率要高。
由此可以得到，有交互效果类的组件，首先推荐的方案是基于基础的视图容器 view 加上 wxs 视图脚本来实现。
有兴趣的可以读读项目源码：https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/slideview
