uni-app 拖拽排序-拖动排序-LimeUI 陌上华年滚屏

在处理uni-app中的拖拽排序功能时，结合LimeUI组件库，我们可以实现一个滚屏支持的拖拽排序功能。以下是一个简单的代码示例，展示如何在uni-app中使用LimeUI组件来实现拖拽排序。

首先，确保你的项目中已经安装了LimeUI。如果未安装，可以通过npm或yarn进行安装。

npm install lime-ui --save
# 或者
yarn add lime-ui

接下来，在你的uni-app项目的页面中，引入并使用LimeUI的拖拽排序组件。以下是一个示例页面代码：

<template>
  <view class="container">
    <lime-draggable-list :list="itemList" @change="handleDragEnd">
      <view v-for="(item, index) in itemList" :key="item.id" class="list-item">
        {{ item.name }}
      </view>
    </lime-draggable-list>
  </view>
</template>

<script>
import { ref } from 'vue';
import { LimeDraggableList } from 'lime-ui';

export default {
  components: {
    LimeDraggableList
  },
  setup() {
    const itemList = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      // 更多项目...
    ]);

    const handleDragEnd = (newOrder) => {
      // newOrder 是拖拽后的新顺序数组
      itemList.value = newOrder.map(item => item.data);
      console.log('拖拽后的新顺序:', itemList.value);
    };

    return {
      itemList,
      handleDragEnd
    };
  }
};
</script>

<style>
.container {
  height: 100vh;
  overflow-y: auto;
}

.list-item {
  padding: 16px;
  margin: 8px 0;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

在这个示例中，我们使用了lime-ui的LimeDraggableList组件来实现拖拽排序。list属性绑定了一个数组，表示要排序的项目列表。@change事件监听拖拽结束后的新顺序，并更新itemList。

注意，这里的LimeDraggableList组件是假设LimeUI提供了这样的组件，实际上LimeUI可能不包含名为LimeDraggableList的直接组件。如果LimeUI没有提供，你可以考虑使用其他支持Vue 3的拖拽排序库，如vue-draggable-next，并相应地调整代码。

此外，为了确保滚屏时拖拽功能正常，我们在.container上设置了overflow-y: auto;，使得内容在超出视口时可以滚动。这样，用户可以在滚屏时顺畅地进行拖拽排序操作。

uni-app 拖拽排序-拖动排序-LimeUI 陌上华年 滚屏

uni-app 拖拽排序-拖动排序-LimeUI 陌上华年滚屏