vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
更新時(shí)間：2021年05月20日 15:01:44 作者：水星記_
最近在開(kāi)發(fā)移動(dòng)端項(xiàng)目，通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧
實(shí)現(xiàn)效果
代碼如下
html
<template>
<div>
<div class="biggestBox">
<ul>
<!-- data-type=0 隱藏刪除按鈕 data-type=1 顯示刪除按鈕 -->
<li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
<!-- "touchstart" 當(dāng)手指觸摸屏幕時(shí)候觸發(fā) "touchend" 當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā) "capture" 用于事件捕獲-->
<div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
<div class="contant">
<img class="image" :src="item.imgUrl" alt />
<div class="rightBox">
<div>{{item.title}}</div>
<div>{{item.subheading}}</div>
<div>{{item.faddish}}</div>
<div>{{item.price}}</div>
</div>
</div>
</div>
<div class="removeBtn" @click="remove" :data-index="index">刪除</div>
</li>
</ul>
</div>
</div>
</template>
js
export default {
name: "index",
data() {
return {
lists: [
{
title: "標(biāo)題1",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題1",
faddish: "爆款",
price: "￥12.00",
},
{
title: "標(biāo)題2",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題2",
faddish: "爆款",
price: "￥58.00",
},
{
title: "標(biāo)題3",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題3",
faddish: "爆款",
price: "￥99.99",
},
{
title: "標(biāo)題4",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題4",
faddish: "爆款",
price: "￥88.32",
},
{
title: "標(biāo)題5",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題5",
faddish: "爆款",
price: "￥9999.99",
},
],
startX: 0, //滑動(dòng)開(kāi)始
endX: 0, //滑動(dòng)結(jié)束
};
},
methods: {
// 向左滑動(dòng)出現(xiàn)刪除按鈕時(shí)，點(diǎn)擊商品信息區(qū)域取消刪除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 點(diǎn)擊商品信息彈出彈框
alert("hello Word!");
}
},
//滑動(dòng)開(kāi)始
touchStart(e) {
// 記錄初始位置
this.startX = e.touches[0].clientX;
},
//滑動(dòng)結(jié)束
touchEnd(e) {
// 當(dāng)前滑動(dòng)的父級(jí)元素
let parentElement = e.currentTarget.parentElement;
// 記錄結(jié)束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大于30距離刪除出現(xiàn)
if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
this.restSlide();
parentElement.dataset.type = 1;
}
// 右滑
if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
this.restSlide();
parentElement.dataset.type = 0;
}
this.startX = 0;
this.endX = 0;
},
//判斷當(dāng)前是否有滑塊處于滑動(dòng)狀態(tài)
checkSlide() {
let listItems = document.querySelectorAll(".li_vessel");
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type == 1) {
return true;
}
}
return false;
},
//復(fù)位滑動(dòng)狀態(tài)
restSlide() {
let listItems = document.querySelectorAll(".li_vessel");
// 復(fù)位
for (let i = 0; i < listItems.length; i++) {
listItems[i].dataset.type = 0;
}
},
//刪除數(shù)據(jù)信息
remove(e) {
// 當(dāng)前索引值
let index = e.currentTarget.dataset.index;
// 復(fù)位
this.restSlide();
// 刪除數(shù)組lists中一個(gè)數(shù)據(jù)
this.lists.splice(index, 1);
},
},
};
css
<style>
* {
/* 消除默認(rèn)內(nèi)外邊距 */
margin: 0;
padding: 0;
}
body {
background: rgb(246, 245, 250);
}
.biggestBox {
overflow: hidden; /*超出部分隱藏*/
}
ul {
/* 消除 ul 默認(rèn)樣式 */
list-style: none;
padding: 0;
margin: 0;
}
.li_vessel {
/* 全部樣式 0.2秒 緩動(dòng)*/
transition: all 0.2s;
}
/* =0隱藏 */
.li_vessel[data-type="0"] {
transform: translate3d(0, 0, 0);
}
/* =1顯示 */
.li_vessel[data-type="1"] {
/* -64px 設(shè)置的越大可以左滑的距離越遠(yuǎn)，最好與下面刪除按鈕的寬度以及定位的距離設(shè)置一樣的值*/
transform: translate3d(-64px, 0, 0);
}
/* 刪除按鈕 */
.li_vessel .removeBtn {
width: 64px;
height: 103px;
background: #ff4949;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 22px;
position: absolute;
top: 0px;
right: -64px;
line-height: 103px;
text-align: center;
border-radius: 2px;
}
/* 左邊的圖片樣式 */
.contant {
overflow: hidden; /*消除圖片帶來(lái)的浮動(dòng)*/
padding: 10px;
background: #ffffff;
}
.contant .image {
width: 80px;
height: 80px;
border-radius: 4px;
float: left;
}
/* 右邊的文字信息樣式 */
.rightBox {
overflow: hidden;
padding-left: 8px;
}
.rightBox div:first-child {
font-weight: bold;
}
.rightBox div:nth-child(2) {
margin-top: 4px;
font-size: 14px;
}
.rightBox div:nth-child(3) {
width: 24px;
background: rgb(219, 91, 113);
color: white;
font-size: 12px;
text-align: center;
padding: 2px 4px 2px 4px;
margin-left: auto;
}
.rightBox div:last-child {
color: red;
font-size: 14px;
font-weight: bold;
}
</style>
完整代碼如下
<template>
<div>
<div class="biggestBox">
<ul>
<!-- data-type=0 隱藏刪除按鈕 data-type=1 顯示刪除按鈕 -->
<li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
<!-- "touchstart" 當(dāng)手指觸摸屏幕時(shí)候觸發(fā) "touchend" 當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā) "capture" 用于事件捕獲-->
<div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
<div class="contant">
<img class="image" :src="item.imgUrl" alt />
<div class="rightBox">
<div>{{item.title}}</div>
<div>{{item.subheading}}</div>
<div>{{item.faddish}}</div>
<div>{{item.price}}</div>
</div>
</div>
</div>
<div class="removeBtn" @click="remove" :data-index="index">刪除</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
lists: [
{
title: "標(biāo)題1",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題1",
faddish: "爆款",
price: "￥12.00",
},
{
title: "標(biāo)題2",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題2",
faddish: "爆款",
price: "￥58.00",
},
{
title: "標(biāo)題3",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題3",
faddish: "爆款",
price: "￥99.99",
},
{
title: "標(biāo)題4",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題4",
faddish: "爆款",
price: "￥88.32",
},
{
title: "標(biāo)題5",
imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
subheading: "副標(biāo)題5",
faddish: "爆款",
price: "￥9999.99",
},
],
startX: 0, //滑動(dòng)開(kāi)始
endX: 0, //滑動(dòng)結(jié)束
};
},
methods: {
// 向左滑動(dòng)出現(xiàn)刪除按鈕時(shí)，點(diǎn)擊商品信息區(qū)域取消刪除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 點(diǎn)擊商品信息彈出彈框
alert("hello Word!");
}
},
//滑動(dòng)開(kāi)始
touchStart(e) {
// 記錄初始位置
this.startX = e.touches[0].clientX;
},
//滑動(dòng)結(jié)束
touchEnd(e) {
// 當(dāng)前滑動(dòng)的父級(jí)元素
let parentElement = e.currentTarget.parentElement;
// 記錄結(jié)束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大于30距離刪除出現(xiàn)
if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
this.restSlide();
parentElement.dataset.type = 1;
}
// 右滑
if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
this.restSlide();
parentElement.dataset.type = 0;
}
this.startX = 0;
this.endX = 0;
},
//判斷當(dāng)前是否有滑塊處于滑動(dòng)狀態(tài)
checkSlide() {
let listItems = document.querySelectorAll(".li_vessel");
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type == 1) {
return true;
}
}
return false;
},
//復(fù)位滑動(dòng)狀態(tài)
restSlide() {
let listItems = document.querySelectorAll(".li_vessel");
// 復(fù)位
for (let i = 0; i < listItems.length; i++) {
listItems[i].dataset.type = 0;
}
},
//刪除數(shù)據(jù)信息
remove(e) {
// 當(dāng)前索引值
let index = e.currentTarget.dataset.index;
// 復(fù)位
this.restSlide();
// 刪除數(shù)組lists中一個(gè)數(shù)據(jù)
this.lists.splice(index, 1);
},
},
};
</script>
<style>
* {
/* 消除默認(rèn)內(nèi)外邊距 */
margin: 0;
padding: 0;
}
body {
background: rgb(246, 245, 250);
}
.biggestBox {
overflow: hidden; /*超出部分隱藏*/
}
ul {
/* 消除 ul 默認(rèn)樣式 */
list-style: none;
padding: 0;
margin: 0;
}
.li_vessel {
/* 全部樣式 0.2秒 緩動(dòng)*/
transition: all 0.2s;
}
/* =0隱藏 */
.li_vessel[data-type="0"] {
transform: translate3d(0, 0, 0);
}
/* =1顯示 */
.li_vessel[data-type="1"] {
/* -64px 設(shè)置的越大可以左滑的距離越遠(yuǎn)，最好與下面刪除按鈕的寬度以及定位的距離設(shè)置一樣的值*/
transform: translate3d(-64px, 0, 0);
}
/* 刪除按鈕 */
.li_vessel .removeBtn {
width: 64px;
height: 103px;
background: #ff4949;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 22px;
position: absolute;
top: 0px;
right: -64px;
line-height: 103px;
text-align: center;
border-radius: 2px;
}
/* 左邊的圖片樣式 */
.contant {
overflow: hidden; /*消除圖片帶來(lái)的浮動(dòng)*/
padding: 10px;
background: #ffffff;
}
.contant .image {
width: 80px;
height: 80px;
border-radius: 4px;
float: left;
}
/* 右邊的文字信息樣式 */
.rightBox {
overflow: hidden;
padding-left: 8px;
}
.rightBox div:first-child {
font-weight: bold;
}
.rightBox div:nth-child(2) {
margin-top: 4px;
font-size: 14px;
}
.rightBox div:nth-child(3) {
width: 24px;
background: rgb(219, 91, 113);
color: white;
font-size: 12px;
text-align: center;
padding: 2px 4px 2px 4px;
margin-left: auto;
}
.rightBox div:last-child {
color: red;
font-size: 14px;
font-weight: bold;
}
</style>
以上就是vue 實(shí)現(xiàn)左滑刪除功能的詳細(xì)內(nèi)容，更多關(guān)于vue左滑刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā))，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建過(guò)程
Mock.js是一個(gè)模擬數(shù)據(jù)的生成器，用來(lái)幫助前端調(diào)試開(kāi)發(fā)、進(jìn)行前后端的原型分離以及用來(lái)提高自動(dòng)化測(cè)試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
Vue3處理錯(cuò)誤邊界(error boundaries)的示例代碼
在開(kāi)發(fā) Vue 3 應(yīng)用時(shí),處理錯(cuò)誤邊界（Error Boundaries）是一個(gè)重要的考量,在 Vue 3 中實(shí)現(xiàn)錯(cuò)誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實(shí)現(xiàn)錯(cuò)誤邊界,并提供一些示例代碼幫助理解什么是錯(cuò)誤邊界,需要的朋友可以參考下2024-10-10
Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解
最近在項(xiàng)目中需要用到addEventListener監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)的高度，所以就研究了一下在vue中是怎么進(jìn)行事件監(jiān)聽(tīng)的，添加事件和移除事件結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-12-12
vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問(wèn)題小結(jié)
這篇文章主要介紹了vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問(wèn)題小結(jié),需要的朋友可以參考下2018-03-03