vue动态列表布局（vue项目实现左滑删除功能完整代码）

<template>
  <li>
    <li class="biggestBox">
      <ul>
        <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
          <li @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <li class="contant">
              <img class="image" :src="item.imgUrl" alt />
              <li class="rightBox">
                <li>{{item.title}}</li>
                <li>{{item.subheading}}</li>
                <li>{{item.faddish}}</li>
                <li>{{item.price}}</li>
              </li>
            </li>
          </li>
          <li class="removeBtn" @click="remove" :data-index="index">删除</li>
        </li>
      </ul>
    </li>
  </li>
</template>

export default {
  name: "index",
  data() {
    return {
      lists: [
        {
          title: "标题1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg" alt="vue动态列表布局（vue项目实现左滑删除功能完整代码）" border="0" />

<style>
* {
  /* 消除默认内外边距 */
  margin: 0;
  padding: 0;
}
body {
  background: rgb(246, 245, 250);
}
.biggestBox {
  overflow: hidden; /*超出部分隐藏*/
}
ul {
  /* 消除 ul 默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.li_vessel {
  /* 全部样式 0.2秒 缓动*/
  transition: all 0.2s;
}
/* =0隐藏 */
.li_vessel[data-type="0"] {
  transform: translate3d(0, 0, 0);
}
/* =1显示 */
.li_vessel[data-type="1"] {
  /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
  transform: translate3d(-64px, 0, 0);
}
/* 删除按钮 */
.li_vessel .removeBtn {
  width: 64px;
  height: 103px;
  background: #ff4949;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 22px;
  position: absolute;
  top: 0px;
  right: -64px;
  line-height: 103px;
  text-align: center;
  border-radius: 2px;
}
/* 左边的图片样式 */
.contant {
  overflow: hidden; /*消除图片带来的浮动*/
  padding: 10px;
  background: #ffffff;
}

.contant .image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  float: left;
}
/* 右边的文字信息样式 */
.rightBox {
  overflow: hidden;
  padding-left: 8px;
}
.rightBox li:first-child {
  font-weight: bold;
}
.rightBox li:nth-child(2) {
  margin-top: 4px;
  font-size: 14px;
}
.rightBox li:nth-child(3) {
  width: 24px;
  background: rgb(219, 91, 113);
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 2px 4px 2px 4px;
  margin-left: auto;
}
.rightBox li:last-child {
  color: red;
  font-size: 14px;
  font-weight: bold;
}
</style>

<template>
  <li>
    <li class="biggestBox">
      <ul>
        <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
        <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
          <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
          <li @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <li class="contant">
              <img class="image" :src="item.imgUrl" alt />
              <li class="rightBox">
                <li>{{item.title}}</li>
                <li>{{item.subheading}}</li>
                <li>{{item.faddish}}</li>
                <li>{{item.price}}</li>
              </li>
            </li>
          </li>
          <li class="removeBtn" @click="remove" :data-index="index">删除</li>
        </li>
      </ul>
    </li>
  </li>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      lists: [
        {
          title: "标题1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg" alt="vue动态列表布局（vue项目实现左滑删除功能完整代码）" border="0" />