鸿蒙OS&UniApp 实现带有滑动删除的列表#三方框架 #Uniapp

使用 UniApp 实现带有滑动删除的列表

在移动应用开发中，滑动删除（Swipe to Delete）是一种常见且实用的交互方式，广泛应用于消息、待办、收藏等列表场景。用户只需在列表项上左右滑动，即可快速删除或管理数据。随着 HarmonyOS（鸿蒙）生态的兴起，如何用 UniApp 实现一个兼容鸿蒙的滑动删除列表，成为许多开发者关注的话题。本文将结合实际项目经验，详细讲解如何用 UniApp 制作一个流畅、易扩展、适配鸿蒙的滑动删除列表组件。

为什么要实现滑动删除？

滑动删除相比传统的长按、点击删除按钮，具有以下优势：

• 操作直观，用户体验更好；
• 节省界面空间，提升美观度；
• 支持批量管理、扩展更多操作（如置顶、标记等）。

在鸿蒙快应用、微信小程序等多端场景下，滑动删除已成为主流交互方式。

方案设计与技术要点

1. 手势识别：监听 touch 事件，判断滑动方向和距离。
2. 动画过渡：滑动时平滑展开删除按钮，提升交互流畅度。
3. 数据管理：删除后及时更新列表数据，支持多端同步。
4. 鸿蒙适配：兼容 HarmonyOS 端的手势、动画、性能等体验。
5. 易用性与扩展性：props 设计合理，便于业务集成和后续扩展。

1. 组件结构与实现

我们以一个通用的 SwipeList 组件为例，支持自定义列表项、删除按钮样式。

<template>
  <view class="swipe-list">
    <view
      v-for="(item, idx) in list"
      :key="item.id"
      class="swipe-item"
      :style="swipeStyle(idx)"
      @touchstart="onTouchStart($event, idx)"
      @touchmove="onTouchMove($event, idx)"
      @touchend="onTouchEnd($event, idx)"
    >
      <view class="item-content">
        <slot :item="item">{{ item.text }}</slot>
      </view>
      <view class="delete-btn" @click="onDelete(idx)">删除</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SwipeList',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      startX: 0,
      moveX: 0,
      activeIdx: -1,
      offsetArr: [] // 记录每个item的偏移量
    };
  },
  created() {
    this.offsetArr = this.list.map(() => 0);
  },
  watch: {
    list(newList) {
      this.offsetArr = newList.map(() => 0);
    }
  },
  methods: {
    swipeStyle(idx) {
      return {
        transform: `translateX(${this.offsetArr[idx]}px)`,
        transition: 'transform 0.2s cubic-bezier(0.4,0,0.2,1)'
      };
    },
    onTouchStart(e, idx) {
      this.startX = e.touches[0].clientX;
      this.activeIdx = idx;
    },
    onTouchMove(e, idx) {
      this.moveX = e.touches[0].clientX;
      let deltaX = this.moveX - this.startX;
      if (deltaX < 0 && Math.abs(deltaX) <= 120) {
        // 向左滑动，最大120px
        this.$set(this.offsetArr, idx, deltaX);
      }
    },
    onTouchEnd(e, idx) {
      let deltaX = this.moveX - this.startX;
      if (deltaX < -60) {
        // 滑动超过60px，展开删除
        this.$set(this.offsetArr, idx, -120);
      } else {
        // 否则回弹
        this.$set(this.offsetArr, idx, 0);
      }
      this.startX = 0;
      this.moveX = 0;
    },
    onDelete(idx) {
      this.$emit('delete', idx);
      this.$set(this.offsetArr, idx, 0);
    }
  }
};
</script>

<style scoped>
.swipe-list {
  width: 100vw;
}
.swipe-item {
  width: 100vw;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 2rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.item-content {
  flex: 1;
  padding: 32rpx 24rpx;
  font-size: 32rpx;
  color: #333;
  background: #fff;
  z-index: 1;
}
.delete-btn {
  width: 120px;
  height: 100%;
  background: #ff4d4f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  transition: background 0.2s;
}
.delete-btn:active {
  background: #d9363e;
}
</style>

2. 组件使用与数据管理

在页面中引用并使用 SwipeList 组件，实现删除功能：

<template>
  <view>
    <swipe-list :list="todoList" @delete="handleDelete">
      <template v-slot:default="{ item }">
        <view>
          <text>{{ item.text }}</text>
        </view>
      </template>
    </swipe-list>
  </view>
</template>

<script>
import SwipeList from '@/components/swipe-list/swipe-list.vue';

export default {
  components: { SwipeList },
  data() {
    return {
      todoList: [
        { id: 1, text: '学习 UniApp 组件化' },
        { id: 2, text: '适配鸿蒙快应用' },
        { id: 3, text: '实现滑动删除交互' }
      ]
    };
  },
  methods: {
    handleDelete(idx) {
      this.todoList.splice(idx, 1);
    }
  }
};
</script>

3. HarmonyOS 适配与优化建议

• 手势体验：鸿蒙端对 touch 事件支持良好，滑动流畅。建议在真机多端测试，适配不同屏幕尺寸。
• 动画优化：可结合 CSS 动画和 requestAnimationFrame 提升过渡流畅度。
• 多操作扩展：可扩展为多按钮（如置顶、标记），提升管理能力。
• 权限声明：如涉及数据同步、云端存储，需在 manifest.json 配置相关权限。
• UI 细节：鸿蒙设备分辨率多样，建议用 vw/rpx 单位自适应。

4. 实际案例与体验优化

在某鸿蒙快应用项目中，滑动删除用于消息列表、待办事项等场景，结合云端同步和本地缓存，提升了数据一致性和用户体验。实际开发中还可结合以下优化：

• 支持批量删除、撤销操作；
• 删除前弹窗确认，防止误删；
• 列表项支持图片、标签等丰富内容；
• 结合长按、拖拽等多种交互方式。

总结

基于 UniApp 的滑动删除列表方案，既能兼容 HarmonyOS 生态，也能满足多端统一开发需求。通过手势识别、动画优化和数据管理，可以为用户带来高效、流畅的列表管理体验。希望本文能为你的鸿蒙/UniApp 项目提供实用参考。

如有问题或更好的实现思路，欢迎留言交流！