隨著智慧型手機的普及和行動互聯網的發展，越來越多的人開始使用手機進行各種操作，其中包括使用各種應用程式。在應用程式中，我們通常會遇到一些清單數據，例如通訊錄、訊息清單、訂單清單等等。這些清單經常需要對資料進行操作，例如查看詳情、標記已讀、刪除等等。其中，刪除操作是較常見的一種操作，本篇文章將聚焦於如何在UniApp中實現一個左滑出現刪除按鈕的效果。
UniApp是一款跨平台開發框架，可在同一個程式碼基礎上，同時產生多個運行平台（包括iOS、Android、H5、小程式、快應用程式等）的應用程式。這使得開發者無需為每個平台單獨編寫程式碼，大大提高了開發效率，降低了開發成本。本文的範例程式碼將使用UniApp開發框架中的Vue.js部分作為基礎。
一、實作想法
實現左滑出現刪除按鈕的效果，一般的做法是在清單項目中新增一個可滑動的區域，當使用者向左滑動該區域時，顯示刪除按鈕。為了確保同時支援多個平台，我們需要考慮在行動裝置上的觸控操作和在PC端的滑鼠操作。基於此，我們需要實現以下邏輯：
二、實作過程
首先我們需要建立一個清單頁面和一個清單項目元件，這裡我們使用uni-ui框架中的list元件和list-item元件作為基礎，以便實現一些基礎的樣式和佈局。具體程式碼如下：
<!-- list.vue -->
<template>
<view>
<list>
<list-item
v-for="(item, index) in list"
:key="index"
:data-index="index"
:class="item.active ? 'item-active' : ''"
>
<view
class="item-content"
@touchstart="onTouchStart(index, $event)"
@touchmove="onTouchMove(index, $event)"
@touchend="onTouchEnd(index, $event)"
@mousedown="onMouseDown(index, $event)"
@mousemove="onMouseMove(index, $event)"
@mouseup="onMouseUp(index, $event)"
>
<view class="item-title">{{item.title}}</view>
<view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
</view>
</list-item>
</list>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ title: '列表项1', active: false },
{ title: '列表项2', active: false },
{ title: '列表项3', active: false },
{ title: '列表项4', active: false },
{ title: '列表项5', active: false },
],
// 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
currentIndex: -1,
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
};
},
methods: {
onTouchStart(index, event) {
this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onTouchMove(index, event) {
this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onTouchEnd(index, event) {
this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
},
onMouseDown(index, event) {
this.handleTouchStart(index, event.pageX, event.pageY);
},
onMouseMove(index, event) {
this.handleTouchMove(index, event.pageX, event.pageY);
},
onMouseUp(index, event) {
this.handleTouchEnd(index, event.pageX, event.pageY);
},
handleTouchStart(index, x, y) {
if (this.currentIndex !== -1) {
return;
}
this.currentIndex = index;
this.startX = x;
this.startY = y;
},
handleTouchMove(index, x, y) {
if (this.currentIndex !== index) {
return;
}
this.moveX = x;
this.moveY = y;
const deltaX = this.moveX - this.startX;
const deltaY = this.moveY - this.startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX < 0) {
this.list[index].active = true;
} else {
this.list[index].active = false;
}
}
},
handleTouchEnd(index, x, y) {
if (this.currentIndex !== index) {
return;
}
this.currentIndex = -1;
this.moveX = x;
this.moveY = y;
const deltaX = this.moveX - this.startX;
const deltaY = this.moveY - this.startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX < 0) {
this.list[index].active = true;
} else {
this.list[index].active = false;
}
}
},
onDeleteItem(index) {
this.list.splice(index, 1);
},
},
};
</script>
<style lang="scss">
.item-active .item-content {
transform: translateX(-60px);
}
.item-content {
position: relative;
height: 60px;
padding: 0 20px;
line-height: 60px;
background-color: #fff;
border-bottom: 1px solid #eee;
overflow: hidden;
.item-delete {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0 20px;
line-height: 60px;
background-color: #f00;
color: #fff;
font-size: 18px;
}
}
</style>這裡我們在清單項目元件的item-content中新增了一個滑動事件監聽和一個刪除按鈕，透過在資料中新增一個active欄位來控制顯示和隱藏刪除按鈕。在樣式中我們透過transform屬性實現左滑效果，並透過overflow:hidden屬性隱藏刪除按鈕。
我們需要監聽觸控事件實作滑動操作，程式碼中使用了單點觸控（touch事件）和滑鼠事件（mousedown、mousemove、mouseup事件）監聽使用者滑動操作。具體實作細節可參考上述程式碼。
當使用者在目標區域內向左滑動時，我們需要顯示刪除按鈕；當使用者在目標區域內向右滑動時，我們需要隱藏刪除按鈕。這裡我們透過新增active欄位來實現刪除按鈕的控制。當使用者向左滑動時，我們將active欄位置為true，反之則置為false。
當使用者點擊刪除按鈕時，我們需要觸發刪除動作。這裡我們透過Vue.js元件實例的splice方法從資料中刪除目前項，具體實作可參考範例程式碼中的onDeleteItem方法。
三、總結
至此，我們已經完成了在UniApp中實現一個左滑出現刪除按鈕的效果。透過實現滑動事件、控制刪除按鈕的顯示和隱藏、以及點擊刪除按鈕觸發刪除操作，我們可以在清單資料中方便地新增刪除操作。
值得注意的是，在實際開發中，我們可能需要滿足更多的需求，例如在刪除操作前進行詢問、支援多重選擇刪除等。在此基礎上，我們可以根據實際需求進行更多的擴展和優化，以提升應用程式的使用者體驗。
以上是uniapp左滑出現刪除按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
