Vant中List組件immediate-check=false無效的解決
Vant中List組件immediate-check=false無效
使用vant中的List組件時(shí)，會(huì)有這樣的場景
初始化時(shí)想自己觸發(fā)列表查詢，而不想觸發(fā) List 組件自帶的 load 方法，這時(shí)可以設(shè)置 immediate-check=false，如下代碼，但是這種方式會(huì)在下面的場景中出現(xiàn)問題
<van-list
ref="vanlist"
v-model="loading"
:finished="finished"
finished-text="已顯示全部周報(bào)"
:error.sync="error"
error-text="請求失敗，點(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;
},
}
問題場景
- 前提：A頁面跳轉(zhuǎn)到B頁面，B為列表頁，A頁面內(nèi)容超過一屏
- 正常：上述代碼，正常情況下，A跳轉(zhuǎn)到B時(shí)，只執(zhí)行 created 中的 getWorkList 方法，不觸發(fā) List 組件中的 getWorkList
- 異常：但是由于A中內(nèi)容超過一屏，頁面滾動(dòng)到底部后，再點(diǎn)擊跳轉(zhuǎn)到B時(shí)，就會(huì)將 created 和 List 組件的 getWorkList 都執(zhí)行一次，導(dǎo)致列表數(shù)據(jù)重復(fù)展示
解決方法
解決方法十分簡單
data () {
return {
loading: false 修改為=> loading: true
};
},
immediate-check無效的原因分析
vant官網(wǎng)中給出的load觸發(fā)條件很明確，也就是offset決定了觸發(fā)與否
下面兩張圖是List組件源碼，可以看出，immediate-check無法阻止?jié)L動(dòng)條的監(jiān)聽事件，滾動(dòng)條與底部距離小于offset 時(shí)，load事件該觸發(fā)還是會(huì)觸發(fā)。
因此，immediate-check屬性準(zhǔn)確的說明應(yīng)該是：
是否在初始化時(shí)立即執(zhí)行滾動(dòng)位置檢查（滾動(dòng)條與底部距離小于offset 時(shí)設(shè)置無效）
Vant list組件使用的坑
1.解決請求兩次數(shù)據(jù)重復(fù)
把finish的初始值設(shè)置為true,然后添加 immediate-check=true
2.如何判斷finish為true的情況
一般看網(wǎng)絡(luò)請求返回的是code是否為錯(cuò)誤碼
3.每次切換tabs欄目必須讓變量finish的值更新為false這樣才會(huì)在上拉的時(shí)候重新去發(fā)送ajax請求去加載數(shù)據(jù)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中正確使用Element-UI組件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue中正確使用Element-UI組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
在看這篇文章的幾點(diǎn)要求：需要你先知道Vue-Router是個(gè)什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue?結(jié)合webpack的初級(jí)使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級(jí)使用指南非常適合入門webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
插槽(slot)作用是讓父組件可以往子組件指定位置插入?html?結(jié)構(gòu),也是組件的一種通信方式,下面這篇文章主要給大家介紹了關(guān)于vue2組件進(jìn)階與插槽的相關(guān)資料,需要的朋友可以參考下2023-02-02
詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問題的修復(fù)方法,需要的朋友可以參考下2018-01-01
本文主要介紹了Vue3中事件總線的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04