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

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

Preface

According to the project needs, Vue-touch is used to implement a left-swipe editing and deletion function for the vue mobile terminal. Without further ado, let's take a look at the effect diagram first, and then the code!

Here’s how:

Step 1: Install vue-touch

npm install vue-touch@next --save

Step 2: Import into main.js

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

Step 3: Use (use v-touch to wrap the content you want to delete by swiping left)

<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>

Step 4: Define variables and methods. You can copy the following code directly, delete the unnecessary ones and replace them with your own, and keep the necessary ones.

<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>

style

I only posted the CSS style of the above code. Please delete it according to your needs. Keep what you need, delete what you don’t need, and modify it yourself if you need to change it

.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%);
}

Summarize

If necessary, you can take it and make slight modifications according to your needs. It is written in great detail. This is the end of this article about the whole process of implementing left-swipe editing and deletion on the vue mobile terminal. For more relevant vue left-swipe editing and deletion content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue imitates QQ left swipe to delete component function
  • Vue uses Mint UI to implement the left-swipe deletion effect CellSwipe
  • Vue.js mobile left swipe delete component implementation code
  • Implement left swipe delete function based on vue2
  • Use Vue to implement the left-swipe deletion effect on the mobile terminal with source code
  • Mpvue applet imitates QQ left swipe to delete the top component
  • Vue left swipe delete function sample code
  • Vue project implements left swipe delete function (complete code)

<<:  How to generate random numbers with specified digits in MySQL and how to generate random numbers in batches

>>:  How to import and export Docker images

Recommend

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

A Deep Dive into the MySQL InnoDB Storage Engine

Preface In MySQL, InnoDB belongs to the storage e...

Beginners learn some HTML tags (2)

Related article: Beginners learn some HTML tags (1...

A brief discussion on HTML table tags

Mainly discuss its structure and some important pr...

How to import and export Docker images

This article introduces the import and export of ...

Detailed explanation of Vuex environment

Table of contents Build Vuex environment Summariz...

SQL function to merge a field together

Recently, I need to query all the fields in a rel...

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

A general method for implementing infinite text carousel with native CSS

Text carousels are very common in our daily life....

How to communicate between WIN10 system and Docker internal container IP

1. After installing the Windows version of Docker...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...