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

Vue implements the digital thousands separator format globally

This article example shares the specific code for...

Detailed explanation of the application of the four states of hyperconnection

Although you think it may be a browser problem, i...

Using keras to judge SQL injection attacks (example explanation)

This article uses the deep learning framework ker...

JavaScript realizes the drag effect of modal box

Here is a case of modal box dragging. The functio...

express project file directory description and detailed function description

app.js: startup file, or entry file package.json:...

How to View All Running Processes in Linux

You can use the ps command. It can display releva...

How to run top command in batch mode

top command is the best command that everyone is ...

A brief discussion on the performance issues of MySQL paging limit

MySQL paging queries are usually implemented thro...

Some summary of html to pdf conversion cases (multiple pictures recommended)

Due to work requirements, I recently spent some t...

How to deploy nginx with Docker and modify the configuration file

Deploy nginx with docker, it's so simple Just...

Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7

You always need data for development. As a server...

Details of watch monitoring properties in Vue

Table of contents 1.watch monitors changes in gen...

Summary of commonly used commands for docker competition submission

Log in to your account export DOCKER_REGISTRY=reg...

Optimization methods when Mysql occupies too high CPU (must read)

When Mysql occupies too much CPU, where should we...