摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。
前言
前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示
效果展示老规矩，先上效果，效果不是很好，大家如果有什么生成gif的好用的软件可以推荐下：
分析效果途中的结构，我们可以得出每一项可滑动删除的节点的结构包含如下两部分：
正文部分，显示咱们的主内容
滑动出来的部分（如：删除按钮）
因为使用swiperOut的情景一般都是列表，所以，这里我们用li标签；在实际使用情况中，咱们的content和btns两个容器中的内容是经常会自定义的，所以在这里咱们使用两个插槽slot接受用户的自定义：
这个是咱们每一项的DOM结构，接下来，咱们还需要把这个列表放到一个UL容器中去，我们把UL父容器叫做swiperOut，子列表项li叫做swiperOutItem。swiperOut的DOM结构如下：
swiperOutItem:
我们这里让正文content占据视图的100%，然后按钮容器btns靠右绝对定位，然后再把btns向右移动100%，这样btns就刚好衔接在content后面。当向左滑动的时候，item向左移动，btns显示出来。父容器swiperOut的样式如下:
javascript该交互的具体逻辑如下：
自容器向左滑动，容器跟着移动
如果有已经处于打开状态的子项，需要把这个已经打开的子项关闭
当手指释放的时候，判断移动距离是否超过阀值
如果超过阀值，则运用动画，把btns完全显示出来
如果没有，则运用动画返回初始状态
首先当子项初始化的时候我们应该获取btns的宽度，因为这个宽度决定了我们向左最多能滑动多少
接下来，咱们应该给item绑定一个样式对象，用来动态控制，子项滑动的距离：
接下来给content绑定滑动事件：
接下来完善，touchstart函数：
记录手指开始滑动的坐标
将动画执行事件设置成零
记录当前item的X轴坐标
完善我们的核心函数touchmove函数，逻辑如下：
获取手指横向移动距离moveX以及纵向距离moveY
判断手指是横向滑动还是纵向滑动，如果是横向滑动才移动容器，否则假设用户在滚动列表
判定用户在横向滑动，计算出item当前在X轴应该滑动的距离
当手指离开屏幕，触发touchend的时候：
判定当前滑动总距离是否超过阀值
超过阀值，显示btns，否则重置item的移动
给item一个动画，关闭或者打开btns
到目前为止，咱们完成了item本身的交互逻辑，但是下面这个功能咱们目前还没有实现：
如果有已经处于打开状态的子项，需要把这个已经打开的子项关闭
那么我们应该怎么实现这个功能呢，我的初步设想是：
当用户触发滑动的时候，咱们触发父组件中的一个事件，把自组件本身传递给父组件；父组件记录当前活动的组件，如果之前活动的组件和当前活动的组件不是同一个子项，那么调用子组件自己的重置函数，关闭上一个活动子项，然后根据之前的逻辑移动现在咱们手指触摸的这个组件。代码如下：
swiperOutItem:
请注意，在touchmove中咱们增加了一句代码：this.$parent.$emit("changeActiveItem", this)
swiperOut:
到此为止，咱们这个组件基本上已经完成了，但是还有一个问题，就是咱们应该怎么去删除我们的子项呢？这里咱们还是和上面一样，点击子项的删除按钮，触发父组件，然后在父组件中调用removeChild方法删除子项，具体实现如下：
swiperOut:
swiperOutItem:
咱们在这一小节中只写了各个事件的处理函数，但是在DOM中绑定事件的代码没有写出来大家在跟着写代码的时候，千万不要忘了在DOM中绑定事件哦！！，整理最终代码如下：
swiperOut:
swiperOutItem:
写在最后
最近好像懒劲犯了，好久都没有更新博客了，谨记谨记！！！！对了，还有就是如果大家对我写的文章有不懂的，或者说希望我怎么写的更通俗易懂的，可以在评论里面评论我！争取以后的写的更能让大家懂我实现的思路。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54534.html
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的这个组件其实可以很简单的就实现出来，而且体验也能非常的棒当然我们没有实现下拉刷新功能下面我们就一起来实现这个组件。 前言 在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可...
摘要：最后提醒下，代码中使用而非的原因是为了启动移动端手机的动画加速，提升动画流畅度。 前言 最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜...
阅读 3312·2021-11-22 14:44
阅读 2522·2019-08-30 14:10
阅读 2562·2019-08-30 13:12
阅读 1188·2019-08-29 18:36
阅读 1324·2019-08-29 16:16
阅读 3293·2019-08-26 10:33
阅读 1739·2019-08-23 18:16
阅读 360·2019-08-23 18:12
