vue專案實現左滑刪除功能(完整程式碼)
阿新 • • 發佈：2021-05-24
實現效果
程式碼如下
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" 當手指觸控式螢幕幕時候觸發 "touchend" 當手指從螢幕上離開的時候觸發 "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>
export default {
name: "index",data() {
return {
lists: [
{
title: "標題1",imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",subheading: "副標題1",faddish: "爆款",price: "￥12.00",},{
title: "標題2",subheading: "副標題2",price: "￥58.00",{
title: "標題3",subheading: "副標題3",price: "￥99.99",{
title: "標題4",subheading: "副標題4",price: "￥88.32",{
title: "標題5",subheading: "副標題5",price: "￥9999.99",],startX: 0,//滑動開始
endX: 0,//滑動結束
};
},methods: {
// 向左滑動出現刪除按鈕時，點選商品資訊區域取消刪除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 點選商品資訊彈出彈框
alert("hello Word!");
}
},//滑動開始
touchStart(e) {
// 記錄初始位置
this.startX = e.touches[0].clientX;
},//滑動結束
touchEnd(e) {
// 當前滑動的父級元素
let parentElement = e.currentTarget.parentElement;
// 記錄結束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大於30距離刪除出現
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;
},//判斷當前是否有滑塊處於滑動狀態
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;
},//復位滑動狀態
restSlide() {
let listItems = document.querySelectorAll(".li_vessel");
// 復位
for (let i = 0; i < listItems.length; i++) {
listItems[i].dataset.type = 0;
}
},//刪除資料資訊
remove(e) {
// 當前索引值
let index = e.currentTarget.dataset.index;
// 復位
this.restSlide();
// 刪除陣列lists中一個數據
this.lists.splice(index,1);
},};
<style>
* {
/* 消除預設內外邊距 */
margin: 0;
padding: 0;
}
body {
background: rgb(246,245,250);
}
.biggestBox {
overflow: hidden; /*超出部分隱藏*/
}
ul {
/* 消除 ul 預設樣式 */
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);
}
/* =1顯示 */
.li_vessel[data-type="1"] {
/* -64px 設定的越大可以左滑的距離越遠，最好與下面刪除按鈕的寬度以及定位的距離設定一樣的值*/
transform: translate3d(-64px,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-StSnYoIdA
完整程式碼如下
<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" 當手指觸控式螢幕幕時候觸發 "touchend" 當手指從螢幕上離開的時候觸發 "capture" 用於事件捕獲-->
<div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
<div class="contant">
<img class="image" :src="item.imgUrl" alt />
<div class="rightBox">
http://www.cppcns.com <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",//滑動結束
touchEnd(e) {
// 當前滑動的父級元素
let parentElement = e.currentTarget.parentElement;
// 記錄結束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大於30距離刪除出現
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;
},};
</script>
<style>
*程式設計客棧 {
/* 消除預設內外邊距 */
margin: 0;
padding: 0;
}
body {
background: rgb(246,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: centwww.cppcns.comer;
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,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 實現左滑刪除功能的詳細內容，更多關於vue左滑刪除的資料請關注我們其它相關文章！