快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)

更新時(shí)間：2021年05月20日 15:01:44 作者：水星記_

最近在開(kāi)發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧

實(shí)現(xiàn)效果

在這里插入圖片描述

代碼如下

html

<template>
  <div>
    <div 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" 當(dāng)手指觸摸屏幕時(shí)候觸發(fā)  "touchend"  當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)  "capture" 用于事件捕獲-->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <div class="contant">
              <img class="image" :src="item.imgUrl" alt />
              <div class="rightBox">
                <div>{{item.title}}</div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">刪除</div>
        </li>
      </ul>
    </div>
  </div>
</template>

js

export default {
  name: "index",
  data() {
    return {
      lists: [
        {
          title: "標(biāo)題1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題1",
          faddish: "爆款",
          price: "￥12.00",
        },
        {
          title: "標(biāo)題2",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題2",
          faddish: "爆款",
          price: "￥58.00",
        },
        {
          title: "標(biāo)題3",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題3",
          faddish: "爆款",
          price: "￥99.99",
        },
        {
          title: "標(biāo)題4",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題4",
          faddish: "爆款",
          price: "￥88.32",
        },
        {
          title: "標(biāo)題5",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題5",
          faddish: "爆款",
          price: "￥9999.99",
        },
      ],
      startX: 0, //滑動(dòng)開(kāi)始
      endX: 0, //滑動(dòng)結(jié)束
    };
  },
  methods: {
    // 向左滑動(dòng)出現(xiàn)刪除按鈕時(shí)，點(diǎn)擊商品信息區(qū)域取消刪除
    oneself() {
      if (this.checkSlide()) {
        this.restSlide();
      } else {
        // 點(diǎn)擊商品信息彈出彈框
        alert("hello Word!");
      }
    },
    //滑動(dòng)開(kāi)始
    touchStart(e) {
      // 記錄初始位置
      this.startX = e.touches[0].clientX;
    },
    //滑動(dòng)結(jié)束
    touchEnd(e) {
      // 當(dāng)前滑動(dòng)的父級(jí)元素
      let parentElement = e.currentTarget.parentElement;
      // 記錄結(jié)束位置
      this.endX = e.changedTouches[0].clientX;
      // 左滑大于30距離刪除出現(xiàn)
      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;
    },
    //判斷當(dāng)前是否有滑塊處于滑動(dòng)狀態(tài)
    checkSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    },
    //復(fù)位滑動(dòng)狀態(tài)
    restSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      // 復(fù)位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
    //刪除數(shù)據(jù)信息
    remove(e) {
      // 當(dāng)前索引值
      let index = e.currentTarget.dataset.index;
      // 復(fù)位
      this.restSlide();
      // 刪除數(shù)組lists中一個(gè)數(shù)據(jù)
      this.lists.splice(index, 1);
    },
  },
};

css

<style>
* {
  /* 消除默認(rèn)內(nèi)外邊距 */
  margin: 0;
  padding: 0;
}
body {
  background: rgb(246, 245, 250);
}
.biggestBox {
  overflow: hidden; /*超出部分隱藏*/
}
ul {
  /* 消除 ul 默認(rèn)樣式 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.li_vessel {
  /* 全部樣式 0.2秒 緩動(dòng)*/
  transition: all 0.2s;
}
/* =0隱藏 */
.li_vessel[data-type="0"] {
  transform: translate3d(0, 0, 0);
}
/* =1顯示 */
.li_vessel[data-type="1"] {
  /* -64px 設(shè)置的越大可以左滑的距離越遠(yuǎn)，最好與下面刪除按鈕的寬度以及定位的距離設(shè)置一樣的值*/
  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; /*消除圖片帶來(lái)的浮動(dòng)*/
  padding: 10px;
  background: #ffffff;
}

.contant .image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  float: left;
}
/* 右邊的文字信息樣式 */
.rightBox {
  overflow: hidden;
  padding-left: 8px;
}
.rightBox div:first-child {
  font-weight: bold;
}
.rightBox div:nth-child(2) {
  margin-top: 4px;
  font-size: 14px;
}
.rightBox div: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 div:last-child {
  color: red;
  font-size: 14px;
  font-weight: bold;
}
</style>

完整代碼如下

<template>
  <div>
    <div 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" 當(dāng)手指觸摸屏幕時(shí)候觸發(fā)  "touchend"  當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)  "capture" 用于事件捕獲-->
          <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
            <div class="contant">
              <img class="image" :src="item.imgUrl" alt />
              <div class="rightBox">
                <div>{{item.title}}</div>
                <div>{{item.subheading}}</div>
                <div>{{item.faddish}}</div>
                <div>{{item.price}}</div>
              </div>
            </div>
          </div>
          <div class="removeBtn" @click="remove" :data-index="index">刪除</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      lists: [
        {
          title: "標(biāo)題1",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題1",
          faddish: "爆款",
          price: "￥12.00",
        },
        {
          title: "標(biāo)題2",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題2",
          faddish: "爆款",
          price: "￥58.00",
        },
        {
          title: "標(biāo)題3",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題3",
          faddish: "爆款",
          price: "￥99.99",
        },
        {
          title: "標(biāo)題4",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題4",
          faddish: "爆款",
          price: "￥88.32",
        },
        {
          title: "標(biāo)題5",
          imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
          subheading: "副標(biāo)題5",
          faddish: "爆款",
          price: "￥9999.99",
        },
      ],
      startX: 0, //滑動(dòng)開(kāi)始
      endX: 0, //滑動(dòng)結(jié)束
    };
  },
  methods: {
    // 向左滑動(dòng)出現(xiàn)刪除按鈕時(shí)，點(diǎn)擊商品信息區(qū)域取消刪除
    oneself() {
      if (this.checkSlide()) {
        this.restSlide();
      } else {
        // 點(diǎn)擊商品信息彈出彈框
        alert("hello Word!");
      }
    },
    //滑動(dòng)開(kāi)始
    touchStart(e) {
      // 記錄初始位置
      this.startX = e.touches[0].clientX;
    },
    //滑動(dòng)結(jié)束
    touchEnd(e) {
      // 當(dāng)前滑動(dòng)的父級(jí)元素
      let parentElement = e.currentTarget.parentElement;
      // 記錄結(jié)束位置
      this.endX = e.changedTouches[0].clientX;
      // 左滑大于30距離刪除出現(xiàn)
      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;
    },
    //判斷當(dāng)前是否有滑塊處于滑動(dòng)狀態(tài)
    checkSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    },
    //復(fù)位滑動(dòng)狀態(tài)
    restSlide() {
      let listItems = document.querySelectorAll(".li_vessel");
      // 復(fù)位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    },
    //刪除數(shù)據(jù)信息
    remove(e) {
      // 當(dāng)前索引值
      let index = e.currentTarget.dataset.index;
      // 復(fù)位
      this.restSlide();
      // 刪除數(shù)組lists中一個(gè)數(shù)據(jù)
      this.lists.splice(index, 1);
    },
  },
};
</script>

<style>
* {
  /* 消除默認(rèn)內(nèi)外邊距 */
  margin: 0;
  padding: 0;
}
body {
  background: rgb(246, 245, 250);
}
.biggestBox {
  overflow: hidden; /*超出部分隱藏*/
}
ul {
  /* 消除 ul 默認(rèn)樣式 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.li_vessel {
  /* 全部樣式 0.2秒 緩動(dòng)*/
  transition: all 0.2s;
}
/* =0隱藏 */
.li_vessel[data-type="0"] {
  transform: translate3d(0, 0, 0);
}
/* =1顯示 */
.li_vessel[data-type="1"] {
  /* -64px 設(shè)置的越大可以左滑的距離越遠(yuǎn)，最好與下面刪除按鈕的寬度以及定位的距離設(shè)置一樣的值*/
  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; /*消除圖片帶來(lái)的浮動(dòng)*/
  padding: 10px;
  background: #ffffff;
}

.contant .image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  float: left;
}
/* 右邊的文字信息樣式 */
.rightBox {
  overflow: hidden;
  padding-left: 8px;
}
.rightBox div:first-child {
  font-weight: bold;
}
.rightBox div:nth-child(2) {
  margin-top: 4px;
  font-size: 14px;
}
.rightBox div: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 div:last-child {
  color: red;
  font-size: 14px;
  font-weight: bold;
}
</style>

以上就是vue 實(shí)現(xiàn)左滑刪除功能的詳細(xì)內(nèi)容，更多關(guān)于vue左滑刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: