使用uniapp實現滑動刪除功能

使用uniapp實現滑動刪除功能

滑動刪除功能是現代行動應用程式中常見的互動方式之一，它允許使用者在清單或頁面中透過滑動手勢快速刪除不需要的內容。在uniapp框架中，實現滑動刪除功能非常簡單，並且可以適用於多個平台。

首先，我們需要建立一個uniapp項目，並在頁面中顯示需要刪除的清單項目。在清單項目中，我們可以新增一個觸發滑動刪除的區域，並實作對應的事件。

HTML程式碼範例：

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

在上述程式碼中，我們使用了v-for指令來遍歷列表項，並為每個清單項目新增了一個觸發滑動刪除的區域。在滑動刪除區域的右側，我們新增了一個「刪除」按鈕。

接下來，我們需要在對應的vue實例中實作滑動刪除的邏輯。

JavaScript程式碼範例：

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

在上述程式碼中，我們綁定了三個觸控事件函數touchStart、touchMove和touchEnd。在touchStart事件中，我們記錄了滑動開始時的座標資訊。在touchMove事件中，我們計算滑動的距離，並根據一定條件判斷目前是否啟動了滑動刪除功能。在touchEnd事件中，根據滑動的結果執行刪除操作或取消刪除。

最後，我們需要在頁面中加入對應的樣式。

CSS程式碼範例：

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>

透過上述程式碼，我們實作了一個基本的滑動刪除功能，並在uniapp專案中展示了一個刪除清單項目的實例。在實際專案中，我們可以根據需求進一步客製化樣式和互動效果，使滑動刪除功能更符合使用者的期望。

總結：
在uniapp框架中，實作滑動刪除功能非常簡單，只需要在頁面中加入對應的事件和樣式即可。透過touchStart、touchMove和touchEnd等觸控事件函數，我們能夠輕鬆地實現滑動刪除的交互效果，並在對應的方法中執行刪除操作。同時，透過CSS樣式的定制，我們可以讓滑動刪除功能更加美觀實用。

以上是使用uniapp實現滑動刪除功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！