Vant中List組件immediate-check=false無(wú)效的解決
Vant中List組件immediate-check=false無(wú)效
使用vant中的List組件時(shí)，會(huì)有這樣的場(chǎng)景
初始化時(shí)想自己觸發(fā)列表查詢，而不想觸發(fā) List 組件自帶的 load 方法，這時(shí)可以設(shè)置 immediate-check=false，如下代碼，但是這種方式會(huì)在下面的場(chǎng)景中出現(xiàn)問(wèn)題
<van-list
ref="vanlist"
v-model="loading"
:finished="finished"
finished-text="已顯示全部周報(bào)"
:error.sync="error"
error-text="請(qǐng)求失敗，點(diǎn)擊重新加載"
:immediate-check="false"
@load="getWorkList()"
>
data () {
return {
loading: false,
error: false,
finished: false
};
},
created () {
this.getWorkList();
},
methods:{
async getWorkList () {
// 調(diào)接口查詢
....
// 加載狀態(tài)結(jié)束
this.loading = false;
},
}
問(wèn)題場(chǎng)景
- 前提：A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，B為列表頁(yè)，A頁(yè)面內(nèi)容超過(guò)一屏
- 正常：上述代碼，正常情況下，A跳轉(zhuǎn)到B時(shí)，只執(zhí)行 created 中的 getWorkList 方法，不觸發(fā) List 組件中的 getWorkList
- 異常：但是由于A中內(nèi)容超過(guò)一屏，頁(yè)面滾動(dòng)到底部后，再點(diǎn)擊跳轉(zhuǎn)到B時(shí)，就會(huì)將 created 和 List 組件的 getWorkList 都執(zhí)行一次，導(dǎo)致列表數(shù)據(jù)重復(fù)展示
解決方法
解決方法十分簡(jiǎn)單
data () {
return {
loading: false 修改為=> loading: true
};
},
immediate-check無(wú)效的原因分析
vant官網(wǎng)中給出的load觸發(fā)條件很明確，也就是offset決定了觸發(fā)與否
下面兩張圖是List組件源碼，可以看出，immediate-check無(wú)法阻止?jié)L動(dòng)條的監(jiān)聽(tīng)事件，滾動(dòng)條與底部距離小于offset 時(shí)，load事件該觸發(fā)還是會(huì)觸發(fā)。
因此，immediate-check屬性準(zhǔn)確的說(shuō)明應(yīng)該是：
是否在初始化時(shí)立即執(zhí)行滾動(dòng)位置檢查（滾動(dòng)條與底部距離小于offset 時(shí)設(shè)置無(wú)效）
Vant list組件使用的坑
1.解決請(qǐng)求兩次數(shù)據(jù)重復(fù)
把finish的初始值設(shè)置為true,然后添加 immediate-check=true
2.如何判斷finish為true的情況
一般看網(wǎng)絡(luò)請(qǐng)求返回的是code是否為錯(cuò)誤碼
3.每次切換tabs欄目必須讓變量finish的值更新為false這樣才會(huì)在上拉的時(shí)候重新去發(fā)送ajax請(qǐng)求去加載數(shù)據(jù)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue3實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下2023-10-10
在axios中使用params傳參的時(shí)候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時(shí)候傳入數(shù)組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過(guò)程
這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過(guò)程詳解
Vue.js?在其運(yùn)行過(guò)程中會(huì)將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實(shí)際的?DOM?節(jié)點(diǎn),這個(gè)過(guò)程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過(guò)程,需要的朋友可以參考下2024-09-09
electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了Vue基礎(chǔ)知識(shí)快速入門教程,我們可以先學(xué)會(huì)用，使用一段時(shí)間之后，回頭來(lái)熟悉一下Vue框架以及它的特點(diǎn),需要的朋友可以參考下2023-05-05
Vue項(xiàng)目部署到IIS后刷新報(bào)錯(cuò)404的問(wèn)題及解決方法
這篇文章主要介紹了Vue項(xiàng)目部署到IIS后，刷新報(bào)錯(cuò)404,這里需要用到URL重寫工具?--URL?Rewrite，需要的話需要自己下載安裝，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue+openlayers繪制省市邊界線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12