小程序左滑删除 WeUI 中 Slideview（三）

前两篇小程序左滑删除 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

相关文章

1. 小程序左滑删除 movable-view 和 moveable-area（一）
2. 小程左滑删除 slide-view（二）