? ? 需求：拉下菜單中數(shù)據(jù)過多，200條以上，就會導(dǎo)致select組件卡死。所以需要使用滑動到底部使其分頁加載
? ? 可以借助 onPopupScroll 事件來監(jiān)聽下拉菜單的滾動事件，并判斷當(dāng)前是否已經(jīng)到達(dá)了下拉菜單底部。具體可以通過以下步驟實(shí)現(xiàn)：
? ? 1、在組件中綁定?@popupScroll回調(diào)事件
<a-select
v-model="Form.governmentDirectors"
@popupScroll="handlePopupScroll"
>
<a-select-option
v-for="i in queryPageData"
:value="i.id"
:key="i.id"
>{{ i.fullName }}</a-select-option
>
</a-select>? ? 2、在事件處理函數(shù)中，獲取當(dāng)前dom節(jié)點(diǎn)下滑的距離和滾動的位置。
handlePopupScroll(e) {
const { target } = e;
const { scrollTop, scrollHeight, clientHeight } = target;
if (scrollTop + clientHeight == scrollHeight) {
// 已經(jīng)到達(dá)底部，觸發(fā)分頁邏輯
// todo 這里就可以觸發(fā)加載下一頁請求 具體函數(shù)根據(jù)當(dāng)前業(yè)務(wù)需求來定
handlePagination();
}
}? ? 分頁邏輯例子：主要是頁碼++，數(shù)據(jù)追加（concat）
querypageFn() {
const params = {
page: this.querypage.page,
size: this.querypage.size
}
queryListPage(params).then((res) => {
if (res.data.code === 0) {
if (res.data.data.length === 0) {
return
} else {
this.queryPageData = this.queryPageData.concat(res.data.data)
}
}
})
},? ? 以上基本實(shí)現(xiàn)了使用a-select下拉框組件實(shí)現(xiàn)下拉分頁加載數(shù)據(jù)，下面我們來說一下我遇到的坑。
當(dāng)瀏覽器大小縮放為正常100%是沒有問題的，可以正常下拉
并且打印了scrollTop, scrollHeight, clientHeight三個(gè)屬性的關(guān)系
? ? 但是當(dāng)瀏覽器縮放大小調(diào)整不是100%后 我們下拉框滑到底部，是不會繼續(xù)請求的，這時(shí)控制臺也沒有報(bào)錯(cuò)，接口返回也沒有什么問題。
console.log(scrollHeight, scrollTop, clientHeight, 'llslsl')以下為打印的內(nèi)容 分辨率為125%的時(shí)候，我們會發(fā)現(xiàn)?scrollTop發(fā)現(xiàn)偏差，導(dǎo)致條件等式不成立
? ? 到現(xiàn)在我就徹底慌了，難道scrollTop屬性和瀏覽器分辨率有關(guān)。查閱資料后還真的是。
可以這樣解釋：當(dāng)分辨率發(fā)生變化時(shí)，頁面的布局和尺寸也會發(fā)生相應(yīng)的變化，導(dǎo)致元素的位置和大小產(chǎn)生了變化。而
e.target是指觸發(fā)事件的元素，在這個(gè)元素尺寸和位置發(fā)生變化之后，它的scrollTop屬性自然也會受到影響。具體地說，當(dāng)元素的高度變大或縮小時(shí)，它的內(nèi)容區(qū)域的總高度也會發(fā)生相應(yīng)的變化，進(jìn)而影響到
scrollTop屬性的值。例如，當(dāng)元素高度變大時(shí)，它的內(nèi)容就需要滾動更多的距離才能到達(dá)頂部，因此scrollTop屬性的值也會相應(yīng)地增大；而當(dāng)元素高度變小時(shí)，則需要滾動更少的距離才能到達(dá)頂部，因此scrollTop屬性的值也會相應(yīng)地減小。以上是分辨率變化對
e.target的scrollTop屬性的影響的一個(gè)粗略解釋。需要注意的是，具體的影響還取決于其他因素，如CSS樣式、頁面結(jié)構(gòu)等因素的變化。如果具體情況下需要深入了解e.target的scrollTop屬性是如何受到影響的，可以通過調(diào)試工具等手段進(jìn)行進(jìn)一步的排查和分析。
? ? 說一下解決方案吧，我發(fā)現(xiàn)無論怎么變大變小??scrollTop 的偏差都會在2以內(nèi)。所以我們需要改一下if判斷里面的判斷方式。文章來源：http://www.zghlxwxcb.cn/news/detail-419427.html
if (scrollTop + 2 + offsetHeight >= scrollHeight)?? ? 以上我們手動給他把這個(gè)偏差加上2，并且把等式換為大于等于，我們就能完美解決此bug，我一開始以為是歪點(diǎn)子，現(xiàn)在總結(jié)之后發(fā)現(xiàn)這是一個(gè)合適解決方案哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-419427.html
到了這里，關(guān)于如何vue使用ant design Vue中的select組件實(shí)現(xiàn)下拉分頁加載數(shù)據(jù)，并解決存在的一個(gè)問題。的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
