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

作者:OnlyLing

原文链接:https://segmentfault.com/a/1190000015280637

背景

最近一直在断断续续做一个小程序的项目，看起来很小，但一直没正经做过小程序，所有没啥积累，什么东西都要自己写一遍。

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

向左滑动，显示删除按钮，并且，是动画、过渡的打开，左滑一丢丢并不会打开，大概 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 像素才会响应，是不是我的姿势有点问题。

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