Vue mobile terminal realizes the whole process of left sliding editing and deletion

npm install vue-touch@next --save

import VueTouch from 'vue-touch';
Vue.use(VueTouch, {
  name: 'v-touch'
});

<div class="wrap">
      <v-touch
        style="margin-bottom:10px"
        v-on:panstart="onPanStart(key)"
        v-on:panmove="onPanMove"
        v-on:panend="onPanEnd"
        v-for="(item, key) in list"
        :key="key"
      >
  <!-- The div below is the content of the items that need to be deleted by swiping left on my page. You can replace it with your own-->
        <div class="item df_sb item-p" :style="activeId === key ? swipe : ''">
          <p class="left-img">
            <img :src="item.image_url" alt>
          </p>
          <p class="url" v-if="item.redirect_url != '' ">{{item.redirect_url}}</p>
          <p class="city nothave" v-else>None</p>
          <p class="city">{{item.city}}</p>
          <div class="edit-delete df_sad" :ref="'editBtn' + key">
            <div class="edit" @click="editFun('edit',item.id,item.image_url,item.redirect_url)">
              <img src="../../assets/images/adver/ic_xiugai.png" alt>
            </div>
            <p class="edit-line"></p>
            <div class="ad-delete" @click="deleteFun(key,item.id)">
              <img src="../../assets/images/adver/ic_shanchu.png" alt>
            </div>
          </div>
        </div>
      </v-touch>
    </div>

<script>
import httpApi from "../../http/httpApi";
export default {
  name: "",
  data() {
    return {
      swipe: "", // sliding style wd: 0, // the sum of the widths of the edit and delete buttons swipeWd: 0, // the distance you have slid activeId: "", // actually the last activity id
    //The above four variables must be retained, the following three can be deleted page: 1,
      size: 10,
      list: []
    };
  },
  methods: {
//Request list data getList($state) {
      let params = new URLSearchParams();
      params.append("page", this.page);
      params.append("size", this.size);
      this.$post(httpApi.BANNERLIST, params)
        .then(res => {
          if (res.code == 10000) {
            if (res.data) {
              this.list = this.list.concat(res.data.list);
              this.page++;
              if (res.data.list.length === 10) {
                $state.loaded();
              } else {
                $state.complete();
              }
            } else {
              $state.complete();
            }
          } else {
            $state.complete();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // Edit editFun(type, image_id, image, url) {
      this.$router.push({
        path: "/issueAdvertising",
      });
    },
    // delete deleteFun(index, image_id) {
      this.activeId = ""; // Empty the last activity id let params = new URLSearchParams();
      params.append("agent_id", this.id);
      params.append("image_id", image_id);
      this.$post(httpApi.DELETEBANNER, params)
        .then(res => {
          if (res.code == 10000) {
// Although the request to delete the interface deletes one of the items in the list, there are still // items on the page, so it is necessary to delete them in the local array as well, so that it is perfect. The following line of code is more important and can be written in the place where you successfully delete the interface this.list.splice(index, 1); 
            this.modal.toastFun("Deleted successfully");
          } else if (res.code == 20000) {
            this.modal.toastFun(res.message);
          }
        })
        .catch(err => {});
    },
 
// The following three methods are all copied without modification // sliding position onPanStart(id) {
      event.preventDefault();
      // Get the right button width let str = "editBtn" + id;
      this.wd = 1.2 * this.$refs[str][0].offsetWidth;
      // Initialization if (this.activeId != id) {
        this.swipe = "transform:translateX(0px)";
        this.swipeWd = 0;
      }
      this.activeId = id;
    },
//Sliding position onPanMove(event) {
      event.preventDefault();
      let deltaX = event.deltaX;
      // Component moves left until the maximum distance if (deltaX < 0 && deltaX > -this.wd) {
        //Slide left this.swipe = "transform:translateX(" + deltaX + "px)";
        this.swipeWd = deltaX;
      }
 
      if (deltaX > 0 && deltaX <= this.wd && this.swipeWd < 0) {
        //Swipe right let wx = deltaX + this.swipeWd;
        this.swipe = "transform:translateX(" + wx + "px)";
      }
    },
 // End position onPanEnd(event) {
      event.preventDefault();
      // Determine whether the distance moved to the left is greater than one-half let deltaX = event.deltaX;
      if (deltaX < 0) {
        if (deltaX <= -this.wd / 2) {
          //Slide more than half to the left this.swipe = "transform:translateX(" + -this.wd + "px)";
          this.swipeWd = -this.wd;
        } else {
          this.swipe = "transform:translateX(0px)";
          this.swipeWd = 0;
        }
      } else {
        if (this.swipeWd < 0 && deltaX >= this.wd / 2) {
          //Slide more than half to the left this.swipe = "transform:translateX(0px)";
          this.swipeWd = 0;
        } else {
          this.swipe = "transform:translateX(" + this.swipeWd + "px)";
        }
      }
    }
  },
 
};
</script>

.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.item {
  padding-left: 40px;
  height: 120px;
  background: #ffffff;
  align-items: center;
  flex-direction: inherit;
  .left-img {
    width: 120px;
    height: 100px;
    overflow: hidden;
    img {
      min-width: 120px;
      height: 100px;
    }
  }
}
.url {
  width: 400px;
  padding: 10px 30px 0;
  box-sizing: border-box;
  word-wrap: break-word;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.city {
  text-align: center;
  min-width: 100px;
}
.item-p {
  color: #333333;
  font-size: 22px;
}
.nothave {
  color: #999999;
}
.hint {
  height: 40px;
  align-items: center;
  margin-bottom: 30px;
}
.line {
  width: 250px;
  height: 1px;
  background: #999999;
  opacity: 0.5;
}
.item {
  width: 120%; // more than 100%
  transition: 0.1s ease 0s; // transition effect}
.edit-line {
  width: 2px;
  height: 80px;
  background: rgba(255, 255, 255, 1);
}
.edit-delete {
  width: 160px;
  height: 100%;
  background: rgba(255, 126, 34, 1);
  opacity: 0.8;
  align-items: center;
}
.edit,
.ad-delete {
  img {
    width: 42px;
    height: 42px;
  }
}
.add-btn {
  width: 200px;
  height: 80px;
  background: rgba(255, 126, 34, 1);
  box-shadow: 0px 0px 5px 0px rgba(221, 221, 236, 1);
  border-radius: 40px;
  text-align: center;
  line-height: 80px;
  color: #ffffff;
  font-size: 30px;
  position: fixed;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}