# xinxin-select-scroll

**Repository Path**: czxj/xinxin-select-scroll

## Basic Information

- **Project Name**: xinxin-select-scroll
- **Description**: 基于 uni-data-select  二次开发的分页下拉框，通过前端分页，下拉框触底时，加载更多数据。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2025-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## xinxinSelectScroll 下拉框选择器

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

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

### [基本用法，请查看 uni-data-select 文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)

### [分页介绍]

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

### [分页使用]

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

```js
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 有一些好的建议，欢迎留言~