PrefaceAccording 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%); } SummarizeIf 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:
|
>>: How to import and export Docker images
Detailed explanation of the order of Mysql query ...
This article uses examples to illustrate the prin...
With the continuous development of the Internet ec...
The meta tag is used to define file information an...
Preface In MySQL, InnoDB belongs to the storage e...
Related article: Beginners learn some HTML tags (1...
Mainly discuss its structure and some important pr...
Container lifecycle The life cycle of a container...
This article introduces the import and export of ...
Table of contents Build Vuex environment Summariz...
Recently, I need to query all the fields in a rel...
1. Introduction Since pictures take up a lot of s...
Text carousels are very common in our daily life....
1. After installing the Windows version of Docker...
1. Common usage: (1) Use with % % represents a wi...