当时的问题是鼠标动了就会触发加载事件,并没有滚动到底部才触发。(因为高度不对,el-option是单条高度,我需要获取的是接口返回的数据的总高度)
<template>
<!-- el-select远程搜索 + 无限滚动加载下一页 -->
<el-select
v-model="value1"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
:popper-append-to-body="false"
>
<!-- 要知道for循环用在哪 el-option 单条高度 -->
<div v-infinite-scroll="load" :infinite-scroll-disabled="busy">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.data[0].name"
:value="item.data[0].name"
>
</el-option>
</div>
<p v-if="loadMore">加载中</p>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [],
value1: "",
list: [],
loading: false,
states: [],
pageNum: 10,
busy: false,
immediate: false,
loadMore: false,
};
},
mounted() {},
methods: {
remoteMethod(query) {
// 解决重新输入内容滚动条无法回到顶部问题
document.getElementsByClassName(
"el-select-dropdown__wrap"
)[0].scrollTop = 0;
document.getElementsByClassName(
"el-scrollbar__thumb"
)[1].style.transform = "translateY(0)";
this.value1 = query;
console.log(this.value1);
this.getData();
},
async getData() {
console.log(111);
await this.$http
.get(
`https://api.wmdb.tv/api/v1/top?type=Imdb&skip=0&limit=${this.pageNum}&lang=Cn`
)
.then((res) => {
console.log(res.data);
this.options.push(...res.data);
this.pageNum += 10;
this.loadMore = true;
this.busy = false;
});
},
load() {
if (this.busy) return; // 防止一次请求多条数据
this.busy = true;
console.log(1);
console.log(this.pageNum);
this.getData();
},
},
};
</script>