更新记录

1.0.2（2024-01-31）

修复h5无法触发下拉加载

1.0.1（2024-01-31）

新增说明文档

平台兼容性

codeLife-searchSelect

说明

该组件为一个可搜索的下拉选择组件，底层主要是使用uni-easyinput和scroll-view组件来实现的。

使用方式

该组件有两种使用方式，分别为懒加载和非懒加载。

1. 非懒加载的使用方式十分简单。

   <template>
       <view class="content">
           <view style="width: 80%; margin-top: 20rpx; margin-left: 20rpx">
               <codeLife-searchSelect v-model="value" :option-list="optionList"></codeLife-searchSelect>
           </view>
       </view>
   </template>
   <script setup lang="ts">
       import { ref, reactive } from 'vue'
       const optionList = ref<any[]>([])
       const value = ref(undefined)
       const getOptionList = () => {
           optionList.value = Array.from({ length: 10000 }, (item, index) => {
               return { value: index + 1, label: `我是第${index + 1}条数据` }
           })
       }
       getOptionList()
   </script>

   上面我们使用了getOptionList方法来创建了一万条数据，但是我们不必担心组件渲染卡顿的问题，因为非懒加载模式下，组件内部自动做了切片操作，默认每次加载50条数据。

2. 懒加载的使用就会复杂些，为了保证组件内部的纯洁性，我们不会在组件内部处理过多业务逻辑，懒加载的操作更多需要在页面配合实现。

   <template>
       <view class="content">
           <view style="width: 80%; margin-top: 20rpx; margin-left: 20rpx">
               <codeLife-searchSelect v-model="value2" :option-list="optionList2" is-lazy :load="load" @input="inputHandler"
                   @bottom="bottomHandler" @visibleChange="visibleChange"></codeLife-searchSelect>
           </view>
       </view>
   </template>
   <script setup lang="ts">
       import { ref, reactive } from 'vue'
       import { debounce } from '../../../src/utils/debounce.js'  //防抖函数
       const optionList = ref<any[]>([])
       const getOptionList = () => {
           optionList.value = Array.from({ length: 200 }, (item, index) => {
               return { value: index + 1, label: `我是第${index + 1}条数据` }
           })
       }
       getOptionList()
       const value2 = ref(undefined)
       const load = ref(false)
       const optionList2 = ref<any[]>([])
       const isEnd = ref(false)
       const params = reactive({
           page: 1,
           keyword: '',
           size: 50
       })
       // 模拟接口请求
       const imitateAxios = () => {
           return new Promise((resolve, reject) => {
               const startIndex = (params.page - 1) * params.size
               const endIndex = params.page * params.size
               console.log(params, 'params');
               setTimeout(() => {
                   const list = optionList.value.filter(item => item.label.includes(params.keyword)).slice(startIndex, endIndex)
                   resolve(list)
               }, 1000)
           })
       }
       const getListHandler = (type ?: string) => {
           if (type === 'refresh') {
               isEnd.value = false
           }
           if (isEnd.value) {
               return false
           }
           load.value = true
           imitateAxios().then((res : any) => {
               if (params.size > res.length) {
                   isEnd.value = true
               } else {
                   isEnd.value = false
               }
               if (type === 'refresh') {
                   optionList2.value = res
               } else {
                   optionList2.value = optionList2.value.concat(res)
               }
               load.value = false
           })
       }
       const inputHandler = debounce((val : string) => {
           params.keyword = val
           params.page = 1
           getListHandler('refresh')
       }, 500, { leading: true })
       const bottomHandler = () => {
           params.page++
           getListHandler()
       }
       const visibleChange = () => {
           params.page = 1
           params.keyword = ''
           getListHandler('refresh')
       }
   </script>

   上面是一个完整的懒加载示例。我们先使用getOptionList创建出数据用来模拟数据库，使用imitateAxios模拟接口方法。 getListHandler就是我们用来查询数据的方法，我们需要控制该组件的加载状态（load），判断数据是否已经加载完毕（isEnd），以及手动输入的防抖操作和查询，下拉触底的再次加载。

   为什么不把懒加载业务封装在组件内部

   1. 为了保证组件的纯洁性与防止组件过于冗余，我们将懒加载的业务交还给用户。
   2. 懒加载业务的逻辑对于不同项目来说可能也是各不相同的。我们无法将所有情况都包含到。
   3. 如果接口足够统一规范，其实可以使用组合式函数进行封装，每次使用直接引入即可。

属性列表

方法列表

插槽列表