vue項目實現(xiàn)左滑刪除功能(完整代碼)
更新時間：2021年05月20日 15:01:44 作者：水星記_
最近在開發(fā)移動端項目，通過向左滑動出現(xiàn)刪除按鈕，點擊即可刪除，怎么實現(xiàn)這個功能呢，接下來小編給大家?guī)韺嵗a幫助大家學(xué)習(xí)vue項目實現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧
實現(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)手指觸摸屏幕時候觸發(fā) "touchend" 當(dāng)手指從屏幕上離開的時候觸發(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, //滑動開始
endX: 0, //滑動結(jié)束
};
},
methods: {
// 向左滑動出現(xiàn)刪除按鈕時，點擊商品信息區(qū)域取消刪除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 點擊商品信息彈出彈框
alert("hello Word!");
}
},
//滑動開始
touchStart(e) {
// 記錄初始位置
this.startX = e.touches[0].clientX;
},
//滑動結(jié)束
touchEnd(e) {
// 當(dāng)前滑動的父級元素
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)前是否有滑塊處于滑動狀態(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ù)位滑動狀態(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中一個數(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秒 緩動*/
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; /*消除圖片帶來的浮動*/
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)手指觸摸屏幕時候觸發(fā) "touchend" 當(dāng)手指從屏幕上離開的時候觸發(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, //滑動開始
endX: 0, //滑動結(jié)束
};
},
methods: {
// 向左滑動出現(xiàn)刪除按鈕時，點擊商品信息區(qū)域取消刪除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 點擊商品信息彈出彈框
alert("hello Word!");
}
},
//滑動開始
touchStart(e) {
// 記錄初始位置
this.startX = e.touches[0].clientX;
},
//滑動結(jié)束
touchEnd(e) {
// 當(dāng)前滑動的父級元素
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)前是否有滑塊處于滑動狀態(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ù)位滑動狀態(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中一個數(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秒 緩動*/
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; /*消除圖片帶來的浮動*/
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 實現(xiàn)左滑刪除功能的詳細(xì)內(nèi)容，更多關(guān)于vue左滑刪除的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue組件講解(is屬性的用法)模板標(biāo)簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element實現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例
本文主要介紹了element實現(xiàn)二級菜單和頂部導(dǎo)航聯(lián)動的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue element自定義表單驗證請求后端接口驗證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文主要介紹了Vue3?全局切換字體大小的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
Vue.filter函數(shù)用于注冊一個全局的過濾器,該過濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結(jié),需要的朋友可以參考下2024-08-08
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2021-11-11
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue.js中的extend綁定節(jié)點并顯示的方法以及相關(guān)知識點，需要的朋友們學(xué)習(xí)下。2019-06-06
vue3如何添加eslint校驗(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01