uni-app 底部上拉级联组件，可懒加载，可本地（vue3） - mosowe

在uni-app中实现一个底部上拉级联组件，支持懒加载和本地数据（Vue3），可以通过以下步骤实现。以下是一个简化的代码示例，展示了如何实现这个功能。

1. 安装依赖

确保你已经安装了uni-app的相关依赖，以及Vue3。

2. 创建组件

首先，我们创建一个名为CascaderPicker.vue的组件。

<template>
  <view class="cascader-picker">
    <view class="picker-content">
      <!-- 渲染当前选中的级联项 -->
      <view v-for="(item, index) in selectedItems" :key="index">
        {{ item.label }}
      </view>
    </view>
    <button @click="loadMore">加载更多</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  lazyLoad: {
    type: Function,
    required: false,
  },
});

const selectedItems = ref([]);
let currentPage = ref(1);

const loadMore = async () => {
  if (props.lazyLoad) {
    const newData = await props.lazyLoad(currentPage.value);
    // 假设返回的数据结构为 { data: Array, hasNext: Boolean }
    if (newData && newData.data.length > 0) {
      props.data.push(...newData.data);
      if (newData.hasNext) {
        currentPage.value++;
      }
    }
  }
};

onMounted(() => {
  // 初始化选中项，可以根据需求调整
  selectedItems.value = props.data.slice(0, 3); // 假设默认选中前三项
});
</script>

<style scoped>
.cascader-picker {
  padding: 20px;
}
.picker-content {
  margin-bottom: 20px;
}
</style>

3. 使用组件

在你的页面中使用这个组件，并传入数据和懒加载函数。

<template>
  <view>
    <CascaderPicker :data="localData" :lazyLoad="fetchMoreData" />
  </view>
</template>

<script setup>
import CascaderPicker from '@/components/CascaderPicker.vue';

const localData = ref([
  // 初始化本地数据
  { label: 'Item 1', value: 1 },
  { label: 'Item 2', value: 2 },
  { label: 'Item 3', value: 3 },
]);

const fetchMoreData = async (page) => {
  // 模拟异步加载数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          { label: `Item ${page * 3 + 1}`, value: page * 3 + 1 },
          { label: `Item ${page * 3 + 2}`, value: page * 3 + 2 },
          { label: `Item ${page * 3 + 3}`, value: page * 3 + 3 },
        ],
        hasNext: page < 3, // 假设最多加载三页数据
      });
    }, 1000);
  });
};
</script>

这个示例展示了如何在uni-app中使用Vue3创建一个支持懒加载和本地数据的底部上拉级联组件。你可以根据实际需求进一步扩展和优化这个组件。