不使用插件与组件库 - 如何简单实现滑动单元格

前言

很多人都在说不要重复造轮子，咱也不造轮子，最起码要有可以造轮子的简单思想，不论是写什么都有一定的用处。

这个东西实现起来没有什么难度，主要是有一些小的弯弯在里面，下面我会细说一下，具体问题。

准备

老样子，听个大概

实现效果

• 可以左滑动 ?
• 按钮怎么去写 ?
• 可以有层次的出现 ?
• 有点点的弹性效果 ?

实现思路

来说一下，实现上述的效果有什么方法，我先抛一下愚见。 先给出HTML的结构

 <div class="swipe-cell"><div class="swipe"><div class="container">内容区域</div><div class="btn-right">存放按钮区域</div></div></div> 

可以左滑动

• 左滑动：使用transform: translateX()属性。
• 滑多少：使用js获取DOM，去拿到每一个按钮的宽度clientWidth，滑动的是总宽度。

按钮怎么去写

• 按钮的设计：整体存放在一个btn-right的类名盒子里，该盒子是定位在内容的右侧的，因为是流布局的页面模式，div又是块级元素,采用绝对定位,按钮很容易出现在了,可视窗口的右侧了。
• 按钮的初始化：不论几个按钮都采用left:0放到container盒子的右侧，堆叠在一块，为下面的有层次的出现，做伏笔。

可以有层次的出现

• 层次的出现：层次的出现不难，前面有了滑动的总距离，每一个按钮的大小，又在同一起点，所以采用一定的比例去移动，跟随上一家按钮的宽度，作为向右移动的最终的距离- 定位的作用：采用left:xxpx，来然按钮分开，第一个按钮是不需要移动的，left:0完美的贴合在container盒子的右侧，剩下了采用js计算一下，移动的比例(例如:第二个按钮，肯定需要在盒子滑出结束，定位在left:(第一个按钮width)px )

滑动的总距离的时间 = 第二个按钮移到最终地点的时间 = 第三个按钮移到最终地点的时间 = …

对象	所需时间	需滑动的距离
总距离	t	按钮的总宽度
第二按钮	t	第一个按钮的宽度

我们需要得到x2这个距离,上几家按钮的宽度的总宽度.

x1x2=总距离第一按钮的宽度\dfrac{x1}{x2} = \dfrac{总距离}{第一按钮的宽度}x2x1​=第一按钮的宽度总距离​

得出：

x2=x1×第一按钮的宽度总距离{x2} = \dfrac{x1 × 第一按钮的宽度 }{总距离}x2=总距离x1×第一按钮的宽度​

我们能轻易的拿到x2的移动，与x1移动的关系了。

假设二：向右滑动,当前总距离滑动的距离为 -x1 ，第二按钮移动的距离为 x2

总距离−x1x2=总距离第一按钮的宽度\dfrac{总距离 - x1}{x2} = \dfrac{总距离}{第一按钮的宽度}x2总距离−x1​=第一按钮的宽度总距离​

得出：

x2=(总距离−x1)×第一按钮的宽度总距离{x2} = \dfrac{(总距离 - x1) × 第一按钮的宽度 }{总距离}x2=总距离(总距离−x1)×第一按钮的宽度​

拿到x2的移动，与x1移动的关系了。

有点点的弹性效果

• 弹性效果：都是有点溢出，在让其回归正常的一个过程动画。

开始

以上述的思路，开始先构建html与css，全部代码，最下面了，注意这是分析.

html的结构

<div class="swipe-cell"><div class="swipe"><