a-select滚动懒加载数据

最近做的项目中用到了这个需求，简单记录一下，不想写指令的小伙伴可以参考一下 定义变量 scrollPageSize: 10,//一次滚动加载数量 scrollPage: 1,//滚动当前页面 ScrollPageAll: 0,//滚动区域长度 LazyLoding: true,//懒加载状态

获取数据的方法里面

//获取数据 findMyList() { service.findProjectList(state.scrollPageSize, state.scrollPage).then((res) => { state.ScrollPageAll = Math.ceil(res.data.total / state.scrollPageSize) if (res.message == "success") { let data = res.data.dataSource; if (state.scrollPage > 1) { if (state.scrollPage > state.ScrollPageAll) { state.myProjectList = state.myProjectList; state.LazyLoding = false; } else { state.LazyLoding = true; state.myProjectList = state.myProjectList.concat(data); } } else { //通过lazyLoading控制是否继续请求加载数据 state.LazyLoding = true; state.myProjectList = data; } if (!data || data.length == 0 || state.myProjectList.length > res.data.total) { state.LazyLoding = false; } } }); }

接下来写滚动事件

handlePopupScroll(event) { const { target } = event const scrollHeight = target.scrollHeight - target.scrollTop const clientHeight = target.clientHeight // 下拉框不下拉的时候 if (state.LazyLoding) { if (scrollHeight < clientHeight + 5) { if (state.scrollPage < state.ScrollPageAll) { ++state.scrollPage methods.findMyList(); } } } }

在a-select中调用事件，注意，这里室友的api是popupScroll

<a-select v-model:value="state.searchForm.projectId" show-search :field-names="{ label: 'name', value: 'id' }" :options="state.myProjectList" :filter-option="methods.filterOption" style="width:400px" @popupScroll="methods.handlePopupScroll" placeholder="请选择项目">

看看效果

第一次写，多多包涵