vue:2.7.14 element-ui: 2.15.14 lodash: 4.17.21
<template>
<el-select class="select" :value="selectedTags" @focus="focus" @blur="blur">
<div ref="scrollContainer" v-loading="loading">
<!-- 标签选项 -->
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</div>
</el-select>
</template>
<script>
import { debounce } from 'lodash';
export default {
name: "App",
data() {
return {
selectedTags: null,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}, {
value: '选项6',
label: '北京烤鸭'
}, {
value: '选项7',
label: '北京烤鸭'
}, {
value: '选项8',
label: '北京烤鸭'
}, {
value: '选项9',
label: '北京烤鸭'
}, {
value: '选项10',
label: '北京烤鸭'
}, {
value: '选项11',
label: '北京烤鸭'
}, {
value: '选项12',
label: '北京烤鸭'
}],
loading: false
};
},
methods: {
handleScroll: debounce(function () {
const container = this.$refs.scrollContainer.parentNode.parentNode;
if (container.scrollTop + container.offsetHeight >= container.scrollHeight) {
// 滚动到底部的操作
console.log('已滚动到底部');
// 这里可以进行数据加载、页面更新等操作
this.loading = true;
const timer = setTimeout(() => {
this.loading = false;
clearTimeout(timer)
}, 1000);
}
}, 50),
focus() {
this.$nextTick(() => {
const container = this.$refs.scrollContainer.parentNode.parentNode;
container.addEventListener('scroll', this.handleScroll);
});
},
blur() {
// 不要忘记在组件销毁前移除事件监听器,防止内存泄漏
this.handleScroll.cancel;
const container = this.$refs.scrollContainer.parentNode.parentNode;
container.removeEventListener('scroll', this.handleScroll);
}
},
};
</script>