注意: vue 版本需要 ≥ 3.3

1、html

<el-select
	v-model="relation_type"
	placeholder="请选择合作类型"
	ref="select"
>
	<el-option
		v-for="item in cooperationTypeList"
		:key="item.value"
		:label="item.label"
		:value="item.value"
	/>
</el-select>

2、主文件

import { useElSelectionInfinityScroll } from '@/utils/combinationFunc';
setup(props, context) {
	const data = reactive({
		noMore: false,
		loading: false,
		cooperationTypeList: []
	});
	const { proxy } = getCurrentInstance();
	const loadMore = () => {
		if (data.loading) return;
		data.loading = true;
		if (proxy.cooperationTypeList.length > 40) {
			// 获取到最后的值时,不再监听滚动条的动作,移除滚动事件
			data.noMore = true;
		}
		proxy.cooperationTypeList.push(...proxy.cooperationTypeList);
		data.loading = false;
	};
	onMounted(() => {
		const elem = proxy.$refs.select.$refs.scrollbar.$refs.wrap;
		useElSelectionInfinityScroll(elem, loadMore, () => data.noMore);
	});
}

自行补充接口调用相关方法

3、 @/utils/combinationFunc.js

import { onUnmounted, toValue, watchEffect } from 'vue';
import { Throttle } from '@/utils/debunce';

export function useElSelectionInfinityScroll(target, callback, noMore) {
	onUnmounted(() => target.removeEventListener('scroll', Throttle(scolling, 300)));
	const scolling = () => {
		if (toValue(noMore)) return;
		const canLoadMore = target.scrollHeight - target.scrollTop <= target.clientHeight;
		if (canLoadMore) {
			callback();
		}
	};
	watchEffect(() => { scolling(); });
	target.addEventListener('scroll', scolling);
}
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45 10 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 10 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐