VUE列表左滑动出编辑、删除按钮（效果图+完整代码）

这两天遇到个需求，一个数据列表，单条数据左滑动出现编辑、删除按钮，右滑动重新隐藏，点击时先判断是否显示删除按钮，显示的话先隐藏，附效果图如下：

思路：

操作盒子（编辑+删除）定位到列表盒子的最右边；

监听touch事件，根据开始和结束时X坐标的变化判断是左滑动还是右滑动；

通过给列表盒子动态绑定class（通过transform设置位置变化，显露出操作盒子）；

view：

    <div class="wrapper">
      <div class="list">
        <ul>
          <li class="list-item" data-type="0" v-for="(item,index) in 4">
            <div class="flex" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="toDetail">
              <div class="item-left">
                <span class="img-icon">{
   
   {index+1}}</span>
                <img class="item-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568971597302&di=1faf28d67cd4021a88fea9991fd3db82&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg" alt="">
              </div>
              <div class="item-desc">
                <p class="item-text">商品列表支持最多两行展示多余的字用省略号代替商两行展示多余的字用省略号代替商两行展示多余的字用省略号代替商品列表支持最多两行展示多余的字用省略号代替</p>
                <div class="item-price">
                  <span class="now-price">价格:¥119</span>
                  <span class="origin-price">价格:¥229</span>
                </div>
              </div>
            </div>
            <div class="btn-box flex">
              <div class="btn edit">编辑</div>
              <div class="btn del">删除</div>
            </div>
          </li>
        </ul>
        <div class="list-item add" @click="toDetail"></div>
        <div class="tips">点击置顶调整商品顺序<br>左滑可编辑/删除商品</div>
      </div>
    </div>

css：

  .wrapper {
    width: 100%;
    height: 100vh;
    background: #0E0A1C;
    font-size: .14rem;
    color:rgba(225,225,225,1);
  }
  .list {
    padding: 0 .15rem;
    overflow: hidden;
  }
  .list-item {
    position: relative;
    margin: .15rem 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .list-item[data-type='0'] {
    transform: translate3d(0,0,0);
  }
  .list-item[data-type="1"]{
    transform: translate3d(-1.4rem,0,0);
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item-left {
    position: relative;
  }
  .item-img {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
  }
  .img-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: .28rem;
    height: .13rem;
    background: rgba(241, 64, 112, 1);
    border-radius: 0 0 .065rem 0;
    font-size: .12rem;
    text-align: center;
    line-height: .13rem;
  }
  .item-desc {
    width: 2.43rem;
    height: auto;
    margin-left: .12rem;
  }
  .item-text {
    display: -webkit-box ;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
  }
  .item-price {
    line-height: .4rem;
  }
  .now-price {
    color: #F14070;
    margin-right: .1rem;
  }
  .origin-price {
    text-decoration: line-through;
    color: #6C7B8A;
  }
  .btn-box {
    position: absolute;
    top: 0;
    right: -1.55rem;
  }
  .btn {
    display: inline-block;
    width: .7rem;
    height: .9rem;
    font-size: .17rem;
    text-align: center;
    line-height: .9rem;
  }
  .edit {
    background: #212138;
  }
  .del {
    background: #E7BB84;
  }
  .add {
    width: 2.16rem;
    height: .9rem;
    padding: 1px;
    background: url(../../../images/live_goods/add.png) no-repeat;
    background-size: 100%;
  }
  .tips {
    width: 1.2rem;
    height: .33rem;
    margin: 1rem auto;
    font-size: .12rem;
    color: rgba(119, 128, 135, 1);
    line-height: .165rem;
  }

JS

    export default {
      props: {
      },
      data () {
        return {
          startX: 0, // 初始位置
          endX: 0, // 结束位置
        };
      },
      created () {},
      mounted () {},
      methods: {
        // 点击详情
        toDetail () {
          if (this.checkSlide()) {
            this.restSlide();
          } else {
            this.$router.push({
              path: "/activity/live/goods_info"
            });
          }
        },
        // 触摸开始
        touchStart (e) {
          // 记录初始位置
          this.startX = e.touches[0].clientX;
        },
        // 触摸结束
        touchEnd(e) {
          // 当前滑动的父级元素
          let parentElement = e.currentTarget.parentElement;
          // 记录结束位置
          this.endX = e.changedTouches[0].clientX;
          // console.log('结束' + parentElement.dataset.type + '====' + (this.startX - this.endX));

          // 左滑
          if ( parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
            this.restSlide();
            parentElement.dataset.type = 1;
          }

          // 右滑
          if ( parentElement.dataset.type == 1 && this.startX - this.endX < - 30 ) {
            this.restSlide();
            parentElement.dataset.type = 0;
          }

          this.startX = 0;
          this.endX = 0;
        },
        // 判断当前是否有滑块处于滑动状态
        checkSlide() {
          let listItems = document.querySelectorAll('.list-item');

          for (let i = 0 ; i < listItems.length ; i++) {
            if (listItems[i].dataset.type == 1) {
              return true;
            }
          }
          return false;
        },
        restSlide() {
          let listItems = document.querySelectorAll('.list-item');
          // 复位
          for ( let i = 0 ; i < listItems.length ; i++) {
            listItems[i].dataset.type = 0;
          }
        }
      },
      components: {}
    };

以上。