更新记录

1.0.0（2025-04-05） 下载此版本

初始化版本

平台兼容性

uni-app

uni-app x

r-drag

<template>
  <div>
    <h1>列表组件示例</h1>
    <r-drag></r-drag> :list="list" :onDelete="handleDelete" @end="end">
      <!-- 遍历列表，渲染每个列表项 -->
      <template #default="{ dragInfo, start, finish, deleteItem,  }">
        <view
          v-for="(item, index) in list"
          :key="index"
          :data-index="index"
          @touchstart="start(index, $event)"
          @touchmove=""
          @touchend="finish"
          class="list-item"
          :class="{ 'active': dragInfo.dragIndex === index }"            
          :style="{ transform: dragInfo.dragIndex === index? `translateY(${dragInfo.dragOffsetY}px)` : '' }"
        >
          <!-- 显示列表项的图片 -->
          <img :src="item.image" alt="item" style="width: 50px; height: 50px; margin-right: 10px;">
          <!-- 显示列表项的名称 -->
          <span>{{ item.name }}</span>
          <!-- 显示列表项的价格 -->
          <span>{{ item.price }}</span>
          <!-- 删除按钮 -->
          <button @click="deleteItem(index)">删除</button>
        </view>
      </template>
    </ruge-drag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { image: 'https://picsum.photos/50/50', name: 'Item 1', price: '$10' },
        { image: 'https://picsum.photos/50/50', name: 'Item 2', price: '$20' },
        { image: 'https://picsum.photos/50/50', name: 'Item 3', price: '$30' },
        { image: 'https://picsum.photos/50/50', name: 'Item 4', price: '$40' },
        { image: 'https://picsum.photos/50/50', name: 'Item 5', price: '$50' }
      ]
    };
  },
  methods: {
    handleDelete(index) {
      // 重写删除事件逻辑
      this.list.splice(index, 1);
      console.log(`删除了索引为 ${index} 的项`);
    },
    end(data, oldIndex, newIndex) {
      // 输出拖拽的数据、旧索引和新索引
      console.log('拖拽的数据:{},旧的索引:{},新的索引:{}', data, oldIndex, newIndex);
    }
  }
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>