写一个微信小程序侧滑删除组件

背景

最近一直在断断续续作一个小程序的项目，看起来很小，但一直没正经作太小程序，全部没啥积累，什么东西都要本身写一遍。

今天就遇到一个须要，删除操做，按照微信的交互作一个。

向左滑动，显示删除按钮，而且，是动画、过渡的打开，左滑一丢丢并不会打开，大概 10 像素的时候才出发打开。左右滑动的时候，展开的程度和手指滑动贴合。最后手指滑动的方向决定打开仍是关闭，并不是起点与终点的方向。

思路

既然要贴合手指的滑动，必然与 touchstart、touchmove、touchend 有关系。

移动的效果，CSS 3 中的 2D 转换 transform: translateX(0px) 蛮合适的，只须要一个值就能够了。

首先，在 touchstart 标记起点，在 touchmove 的时候不断计算当前元素应该在哪一个位置，touchend 时把状态归位、断定结果。

在 touchmove 中不断元素计算当前位置，手指起点、手指当前点能够计算出当前移动的距离，再与元素的起点结合，能够获得当前元素的位置。但元素的位置时刻都是变化的，须要一个当前元素点的副本。元素的位置也会在一个范围内移动，不能超过了范围。

在 touchend 中更新元素副本的数据，为下次滑动作准备。

最后手指滑动的方向是比较细腻的断定，须要结束滑动那一刻的状态，因而，每次滑动的时候，记录一组滑动的数组，取最后两位的值作断定。

<view class="sideslip-box" >
    <view class="sideslip-content" style="transform: translateX(-{{translateX}}px); transition: transform {{transitionTime / 1000}}s">
        <slot></slot>
    </view>
    <view class="sideslip-tool">
        <view class="btn danger" style="transform: translateX({{item.type === 'del' ? translateXDel : translateXEdit}}px); transition: transform {{transitionTime / 1000}}s">删除</view>
    </view>
</view>

{
    data: {
        transitionTime: 0, // 过渡时间
        translateX: 0, // 当前元素位置
        __currentX:0, // 内部使用，当前元素位置的副本
        __lastXs: [], // 内部使用，记录上一个x
        __startX: 0, // 内部使用，开始的X
    }
}

基本的雏形已经有了。

touchstart 中，标记起点 X，而且初始化 __lastXs，并添加第一个移动坐标。

touchmove 里面不断向 __lastXs 添加值，经过起点的 X 和当前的 X 更新元素的位置，而且作临界值的判断。手指滑动的时候，跟随状态，因此并不须要过渡。

touchend 里面作最有的断定，例如方向、最后的元素位置、过渡时间等。

按照以上方式作，sideslip-content 这边的交互已经完成了，接下来结合一些计算方式，把按钮昨晚就行了。

剩下的能够看看这个代码，微信小程序 侧滑删除、编辑

一些小问题

在滑动的时候，貌似最小须要 16 像素才会响应，是否是个人姿式有点问题。

原文阅读：写一个微信小程序侧滑删除组件