uniapp左滑出現刪除按鈕-uni-app-PHP中文網

首頁

web前端

uni-app

uniapp左滑出現刪除按鈕

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 22, 2023 am 10:10 AM

隨著智慧型手機的普及和行動互聯網的發展，越來越多的人開始使用手機進行各種操作，其中包括使用各種應用程式。在應用程式中，我們通常會遇到一些清單數據，例如通訊錄、訊息清單、訂單清單等等。這些清單經常需要對資料進行操作，例如查看詳情、標記已讀、刪除等等。其中，刪除操作是較常見的一種操作，本篇文章將聚焦於如何在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屬性隱藏刪除按鈕。