Vue项目左滑显示操作按钮

「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」

前言

现在左滑删除已经成为了大家在移动端使用的习惯，但是我一直认为他不是很友好，因为他太会隐藏了^_^。有时候并未发现列表还能够左滑删除，要尝试一下，才知道。今天，我就是来给大家分享一个虽然我认为不太友好的东西，但是大家都在用的。左滑“删除效果”

话不多说，先来点大家最关心的，就是最终的效果。最后再给大家贴上完整的代码。

触摸事件

先介绍一下移动端的触摸事件：

事件名称	描述	是否包含 touches 数组
touchstart	触摸开始，多点触控，后面的手指同样会触发	是
touchmove	接触点改变，滑动时	是
touchend	触摸结束，手指离开屏幕时	是
touchcancel	触摸被取消，当系统停止跟踪触摸的时候触发	否

Touch事件中的属性：

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触摸的DOM节点目标。

其实左滑这个过程主要就是用到了touchStart 和touchEnd这两个事件，判断属性clientX的滑动位置，来处理列表的transform动画，即向左移动的，显示隐藏的操作按钮。

完整的代码：

<style lang="scss">
 .list-box {
    position: relative;
    display: flex;
    transition: all 0.2s;
    transform: translate3d(2rem, 0, 0);
    &[data-type="0"] {
      transform: translate3d(0, 0, 0);
    }
    &[data-type="1"] {
      transform: translate3d(-2rem, 0, 0);
    }
  }
  .caozuo {
    position: absolute;
    top: 0;
    right: -2rem;
    display: flex;
    color: #fff;
    height: 100%;
    p {
      width: 1rem;
      font-size: 0.28rem;
      height: calc(100% - 0.18rem);
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(1) {
        background-color: #5d9ef5;
      }
      &:nth-child(2) {
        background-color: #f75855;
      }
    }
  }
  .list {
    width: 6.4rem;
    padding: 0.24rem 0.24rem 0 0.24rem;
    min-height: 2.74rem;
    border-radius: 0.1rem;
    background: #fff;
    margin: 0 auto 0.18rem auto;
    font-size: 0.32rem;

    .tag-date {
      height: 0.4rem;
      display: flex;
      align-items: center;
      .date {
        padding-left: 0.22rem;
      }
    }
    .sb-content {
      padding: 0.2rem 0;
      font-weight: bold;
      span{
        padding-right:0.2rem;
      }
    }
    .sb-ren {
      font-size: 0.28rem;
    }
    .beizhu {
      margin-top: 0.12rem;
      border-top: 0.01rem solid #f2f2f2;
      padding: 0.3rem 0;
      font-size: 0.28rem;
      color: #9999;
    }
  }
  .sb-btn {
    width: 6.9rem;
    height: 0.7rem;
    position: fixed;
    bottom: 0.72rem;
    left: 0.3rem;
    background-color: #5d9ef5;
    box-shadow: 0px 0px 26px 0px rgba(93, 158, 245, 0.52);
    border-radius: 0.1rem;
    font-size: 0.34rem;
    color: #fff;
    text-align: center;
    line-height: 0.7rem;
  }
</style>
<div class="list-box"
             v-for="(item,index) in list"
             :key="index"
             data-type="0">
          <div class="list"
               @touchstart.capture="touchStart"
               @touchend.capture="touchEnd">
            <div class="tag-date">
              <van-tag color="#ff7386">{{item.score}}分</van-tag>
              <span class="date">{{item.date}}</span>
            </div>
            <div class="sb-content">
              <span v-if="item.name">{{item.name}}</span>
              <span>{{item.buildName}}{{item.roomName }}</span>
            </div>
             
          </div>
          <div class="caozuo">
            <p @click="edit(item)">修改</p>
          </div>

 </div>
 <script>
 export default {
  data(){
    return {
      list: [],
    }
  },
  methods:{
      //滑动开始
    touchStart (e) {
      // 记录初始位置
      this.startX = e.touches[0].clientX;
    },
    //滑动结束
    touchEnd (e) {
      console.log(e)
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      // 左滑
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 50) {
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      // 右滑
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -50) {
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    //复位滑动状态
    restSlide () {
      let listItems = document.querySelectorAll('.list-box');
      // 复位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
  }
 }
 </script>

总结

以上就是给大家介绍的基于vue，js原生实现移动端左滑操作功能，希望对大家有所帮助，主要思路也是某度查找的。