[前端特效] 左滑显示按钮的实现介绍

最近在开发「Todo-List」应用，今天想介绍下一个前端特效 - 左滑显示按钮组的实现。

精简后的代码已提交至Github-Gist：slide-item-demo.html，有需要自取~

下述是具体实现的讲解。

页面代码

html 复制代码

<div class="slide-container">
    <!-- 滑动项 -->
    <div class="slide-item" id="item1">
        <div class="item-content">项目1 - 向左滑动删除</div>
        <div class="delete-btn">删除</div>
    </div>
    <div class="slide-item" id="item2">
        <div class="item-content">项目2 - 向左滑动删除</div>
        <div class="delete-btn">删除</div>
    </div>
</div>

这里页面代码就一个容器，内部是列表项，而每个列表项内部是一个主体内容外加一个删除按钮。

样式代码

css 复制代码

.slide-item {
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */
    user-select: none; /* 防止拖拽时选中文字 */
    ...
}

.item-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    ...
}

.delete-btn {
    ...
}

上述是精简后的核心的样式，主要有：

slide-item 的溢出隐藏，来保证左滑后主体部分溢出列表项边界后被隐藏
item-content 的绝对位置是结合父组件的相对位置来使用的，确保位置是在父组件内；top和left固定左上角位置；z-index必须大于delete-btn的，来确保未滑动时，可以遮挡隐藏删除组件
delete-btn基本和item-content类似的样式

滑动效果实现

滑动效果的实现主要依赖 JavaScript，这块代码确实有点实现难度，十分考验程序员对 JavaScript 各种监听事件以及对变量状态的熟练使用程度。

这里具体源码就不展示了，主要是太长了，就介绍下大体实现思路吧。有源码需要的同学，请自取：slide-item-demo.html

监听事件的运用

主要涉及两类事件：一类是实现左滑交互效果的拖拽事件的监听；一类是防止干扰的点击事件或原生拖拽事件的监听。

1. 基础拖拽事件：实现左滑交互效果

mousedown - 开始拖拽：当鼠标在元素上按下时触发，通常在这里记录初始位置、准备拖拽、可以设置拖拽标志为true；具体到这里的左滑效果中是 dragStartHandler 事件。
mousemove - 拖拽过程：鼠标在元素上移动时持续触发，负责更新元素位置，配合mousedown开启的标志位来执行；具体到这里的左滑效果中是 dragMoveHandler 事件。
mouseup - 结束拖拽：鼠标松开时触发，清理拖拽状态、重置相关标志位；具体到这里的左滑效果中是 dragEndHandler 事件。

2. 防止其他事件干扰

click - 点击处理：点击时不触发拖拽效果甚至回复拖拽效果；具体到这里的左滑效果中是 clickHandler 事件。
dragstart - 阻止原生拖拽：阻止浏览器默认的拖拽行为（如图片拖拽、链接拖拽），避免与自定义拖拽实现冲突

javascript 复制代码

item.addEventListener('dragstart', (e) => e.preventDefault());

状态变量的运用

整个处理过程中，通过状态变量来控制组件的最终位置等数据，最终配合拖拽事件等来实现左滑效果。

具体来说就是两个变量了：state 和 instances。

state 用于控制具体左滑项的各种位置信息和状态信息。
instances 用于存储整个列表项数据，来确保点击其他位置时，原已经滑动的列表项可以恢复，从而实现「滑动A后，滑动B，此时，A自动恢复」。

总结

日常看到的含拖拽效果，我理解应该都是类似上述代码实现的。掌握了上述操作，其他拖拽效果也就会了。

好啦，以上就是今天的讲解内容啦，感谢阅读，欢迎三连！