最新消息:站点添加了一些不太友好的内容,请见谅...

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

若思若想 onlyling 930浏览 0评论

背景

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

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

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

思路

既然要贴合手指的滑动,必然与 touchstarttouchmovetouchend 有关系。

移动的效果,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 像素才会响应,是不是我的姿势有点问题。

转载请注明:OnlyLing-WEB前端开发者 » 写一个微信小程序侧滑删除组件

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)