更新记录

1.0.0（2026-01-29） 下载此版本

平台兼容性

uni-app(3.6.15)

x-select 下拉选择器

类似 Ant Design Vue 的下拉选择器组件，支持无限滚动分页加载。

功能特性

• 📦 基础选择：支持自定义 value 和 label 字段。
• 📜 滚动分页：支持 scrolltolower 事件，轻松实现无限滚动加载。
• 🚫 禁用状态：支持整体禁用和单个选项禁用。
• 🎨 Ant Design 风格：简约、现代的 UI 设计。

引入组件

import xSelect from '@/components/x-select/x-select.vue';

export default {
  components: {
    xSelect
  }
}

代码演示

基础用法

<x-select
  v-model="value"
  :options="options"
  placeholder="请选择"
></x-select>

data() {
  return {
    value: '',
    options: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 }
    ]
  }
}

滚动分页加载

监听 load-more 事件，在回调中请求下一页数据并追加到 options 数组中。

<x-select
  v-model="value"
  :options="options"
  :loading="loading"
  :hasMore="hasMore"
  placeholder="滚动加载更多"
  @load-more="handleLoadMore"
></x-select>

methods: {
  handleLoadMore() {
    if (this.loading || !this.hasMore) return;

    this.loading = true;
    // 模拟异步请求
    setTimeout(() => {
      const newItems = [...]; // 获取新数据
      this.options = [...this.options, ...newItems]; // 追加数据
      this.loading = false;

      if (noMoreData) {
        this.hasMore = false;
      }
    }, 1000);
  }
}

API

Props

Events

Slots