Swipe left to delete is a very common operation on mobile terminals, which are common in deleting products in shopping carts, deleting articles in favorites, and other scenarios. We just need to hold the object we want to delete with our fingers, then gently swipe to the left, and the delete button will appear, and then click the delete button to delete the object.
Click to download the source code
The mobile left-slide deletion effect I will introduce to you today is based on Vue2. Combined with the deletion of shopping cart products from e-commerce platforms as an example, we can see the implementation steps.
Prepare
The process of installing the vue project has been ignored. If you don’t understand vue, you can go to the official website to read it:/v2/guide/#NPM
We use the installation of a webpack template:
vue init webpack test
Components
We create a left-slide component, create a file in the src/components directory: and then write the template code:
<template>
<div class="delete">
<div class="slider">
<div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider">
<!-- Put contents in specific projects in slots -->
<slot name="img"></slot>
<slot name="title"></slot>
<slot name="price"></slot>
<!-- Default slot -->
<slot></slot>
</div>
<div class="remove" ref='remove' @click="deleteLine">
delete
</div>
</div>
</div>
</template>
Our template is a list item to be deleted by swiping left, bound to the gesture sliding touch action response, adding pictures, product names, prices and other contents, as well as a delete button.
Next, let's look at the js part in the component:
<script>
export default {
props: ['index'],
data() {
return {
startX: 0, //Touch position endX: 0, //End Location moveX: 0, //The position when sliding disX: 0, //Movement distance deleteSlider: '',//The effect when sliding, use v-bind:style="deleteSlider" }
},
methods:{
touchStart(ev){
ev = ev || event
//Tounches class array, when equal to 1, means that there is only one finger touching the screen at this time if( == 1){
// Record start position = [0].clientX;
}
},
touchMove(ev){
ev = ev || event;
//Get the width of the delete button, this width is the maximum distance for the slider to slide left. let wd = this.$;
if( == 1) {
// Real-time distance from the left side of the browser when sliding = [0].clientX
//Subtract the real-time sliding distance to get the real-time offset distance of the finger = - ;
//()
// If you slide to the right or not, do not change the position of the slider if ( < 0 || == 0) {
= "transform:translateX(0px)";
} else if ( > 0) {// Greater than 0 means that the left slides, and the slider starts to slide at this time //I took the specific sliding distance: the finger offset distance *5. = "transform:translateX(-" + *5 + "px)";
// The maximum can only be equal to the width of the delete button if (*5 >= wd) {
= "transform:translateX(-" +wd+ "px)";
}
}
}
},
touchEnd(ev){
ev = ev || event;
let wd = this.$;
if ( == 1) {
let endX = [0].clientX;
= - endX;
//()
//If the distance is less than half of the delete button, force it to return to the starting point if ((*5) < (wd/2)) {
= "transform:translateX(0px)";
}else{
//Greater than half Slide to maximum value = "transform:translateX(-"+wd+ "px)";
}
}
},
deleteLine (){
= "transform:translateX(0px)";
this.$emit('deleteLine');
}
}
}
</script>
We mainly use three mobile touch events in our code:
touchstart: Triggered when the finger is placed on the screen
touchmove: Sliding fingers on the screen
touchend: Triggered when the finger leaves the screen
After each touch event is triggered, an event object will be generated, and the event object includes the following three touch lists.
touches: List of all fingers on the current screen
targetTouches: The list of fingers on the current dom element, try to use this instead of touches
changedTouches: A list of fingers involving the current event. Try to use this instead of touches
Each touch in these lists consists of a touch object, which contains touch information, and the main attributes are as follows:
clientX / clientY: The location of the touch point relative to the browser window
pageX / pageY: The position of the touch point relative to the page
screenX / screenY : The position of the touch point relative to the screen
It can also be seen in the above code that the slider automatically returns to the starting position when it does not exceed half of the delete button. Click Delete and call deleteLine to delete the current line.
Component call
We create a template in it and introduce the component deleteSlider. The code is as follows:
<template>
<div class="mylist">
<delete-slider v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, )">
<div class="li-img" slot="img"><img :src="" alt=""></div>
<h3 class="li-title" slot="title">{{}}</h3>
<p class="li-price" slot="price">{{}}</p>
</delete-slider>
</div>
</template>
<script>
import deleteSlider from '@/components/'
export default {
components: {
deleteSlider
},
data () {
return {
dataList: [
{
id: 1,
img: 'static/',
title: 'French counter 2019 summer new slim fit and slim temperament hip-covered short skirt hollow lace sexy dress',
price: '399.00'
},
{
id: 2,
img: 'static/',
title: 'VERAMOON SECOND printed short-sleeved dress for women's summer sweet backless sexy puff sleeve slim skirt',
price: '689.00'
},
{
id: 3,
img: 'static/',
title: 'famous fairy-like black ears purple floral short skirt A-line chiffon dress for women',
price: '199.00'
},
{
id: 4,
img: 'static/',
title: 'Grey customization 2019 spring and summer new small fragrance style tweed dress for women French socialite retro short skirt M home',
price: '298.00'
}
]
}
},
methods:{
deleteLine (index, id){
(id);
(index, 1)
}
}
}
</script>
Note that in actual applications, data sources can be loaded asynchronously. When deleting, you may need to request the backend asynchronously to truly complete the deletion operation.
Summarize
The above is what the editor introduced to you to use Vue to realize the left-slide deletion effect of mobile terminal with source code. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!