vue + flex布局完美实现微信左滑删除

前言：前端实现左滑删除的帖子网上有很多，但是没有找到一款能跟微信完全一样的，大多的思路都是将删除键隐藏在最右边，滑动的时候拉出来，而微信原版的按钮是有缩放效果的，也就是右滑的时候，按钮宽度会缩小，并不是直接隐藏在最右边。于是，自己用vue + flex布局实现了一个按钮能够随着右滑而缩小的demo，核心是flex-shrink属性，flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不懂flex布局的同学请阅读《Flex 布局语法教程》

1.效果

1.1 进入我的Github看[在线演示]

Github地址：https://github.com/Yashaha/wechat-cellitem

2.实现思路

1. 设置flex布局，“标为已读”和“删除”按钮的flex-shrink设置为1（默认值），“信息详情”的flex-shrink设置为0，即不会进行缩放。用span标签包裹“标为已读”和“删除”。
2. 为“信息详情”添加事件监听touchstart、touchmove、touchend，通过margin-left来控制滑动距离。
3. 将“标为已读”和“删除”的span宽度设置为0。（很关键，这样做文字就不会把span撑出宽度，否则无法彻底缩放为0）

3.具体步骤

3.1 设置基本的html和CSS

一个消息框包含了“消息”，“标为已读”，“删除”三个部分，分别用一个div来表示，并定义好颜色，设置为flex布局。注意“标为已读”、“删除”文本用span标签包裹，后面步骤需要为span添加CSS属性。“信息详情”宽度设置为100%。记得加上overflow: hidden，不然会超出屏幕宽度。

代码如下：
HTML：

<template>
  <div class="cell">
    <div class="cell-info">信息详情</div>
    <div class="cell-read">
      <span>标为已读</span>
    </div>
    <div class="cell-delete">
      <span>删除</span>
    </div>
  </div>
</template>

CSS：

<style>
body {
   
  margin: 0;
  padding: 0;
  border: 0;
}
.cell {
   
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 75px;
}
.cell-info {
   
  width: 100%;
}
.cell-read {
   
  width: 80px;
  background-color: #ccc;
}
.cell-delete {
   
  width: 40px;
  background-color: red;
}
</style>

3.2 设置flex-shrink属性

将cell-info的flex-shrink设置为0，即使空间不足，也不会进行缩放。其余的默认为1。可见“标为已读”和“删除”都已经不见了，空荡荡的，好了快点进行下一步。