更新记录

1.0.3（2025-10-30） 下载此版本

1.0.3（2025-10-30）

• 修复文本过长时，超出文本框的问题

1.0.2（2025-10-30） 下载此版本

1.0.2（2025-10-30）

• 修复选择后，没有正常关闭下拉框问题

1.0.0（2025-10-30） 下载此版本

1.0.0（2025-10-30）

• 初始化
• 下拉框触底加载更多

平台兼容性

uni-app(3.6.12)

uni-app x(3.6.12)

xinxinSelectScroll 下拉框选择器

组件名：xinxin-select-scroll 代码块： xxSelectScroll

因数据量过大，或后端无法进行分页的情况，uni-data-select 组件会有卡顿，基于 uni-data-select 二次开发的分页下拉框，通过前端分页，下拉框触底时，加载更多数据。

基本用法，请查看 uni-data-select 文档

[分页介绍]

1. 在 props 中新增了 pageSize 属性，默认值为 20 条数据
2. 添加了分页相关的响应式数据：
   1. currentPage: 用于记录当前页码
   2. loading: 加载状态标识
3. 添加了 displayedData 计算属性，用于计算当前应该显示的数据（根据当前页码和每页数量）
4. 在模板中使用 displayedData 替代原来的 mixinDatacomResData 来显示下拉选项
5. 增加了 @scrolltolower="ToLower" 事件监听，当用户滚动到下拉框底部时会触发加载更多
6. 实现了 ToLower 方法，用于处理滚动到底部时的分页加载逻辑
7. 在样式中添加了 .loading-tip 类，用于显示加载提示
8. 在模板中添加了加载提示元素
9. 在相关方法中重置分页状态（如搜索、获取新数据等操作时）

[分页使用]

<template>
  <view>
    <xx-select-scroll v-model="value" :localdata="range" :pageSize="pageSize" @change="change"></xx-select-scroll>
  </view>
</template>

export default {
  data() {
    return {
      value: 1,
      pageSize: 5, // 默认值为 20 条数据
      range: [
        { value: 0, text: '篮球0' },
        { value: 1, text: '足球1' },
        { value: 2, text: '游泳2' },
        { value: 3, text: '篮球3' },
        { value: 4, text: '足球4' },
        { value: 5, text: '游泳5' },
        { value: 6, text: '篮球6' },
        { value: 7, text: '足球7' },
        { value: 8, text: '游泳8' },
        { value: 9, text: '足球9' },
      ],
    };
  },
  methods: {
    change(e) {
      console.log('e:', e);
    },
  },
};

如使用过程中有任何问题，或者您对 xinxin-select-scroll 有一些好的建议，欢迎留言~