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

在全局配置文件 app.json 中引入：

在需要使用 Slideview 的页面 page.json 中引入组件：

WXML 文件中引用 slideview：

JS 文件中需要配置左滑的按钮 slideButtons:

这样即引用了 Slideveiw 组件。

WXML文件：

可以看到，微信团队并没有使用可移动区域组件 movable-view 和 movable-area 实现，而是直接使用 view 容器实现。

并且 slideview 使用 wxs 视图脚本，不用与逻辑层通讯，降低了线程的开销，比 js 效率要高。

由此可以得到，有交互效果类的组件，首先推荐的方案是基于基础的视图容器 view 加上 wxs 视图脚本来实现。

有兴趣的可以读读项目源码： https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/slideview

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="*this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>

<view class="{{dotsClass[2]}}"></vi

---