欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vant中List組件immediate-check=false無效的解決

 更新時間:2023年01月20日 08:46:39   作者:My_Java_Life  
這篇文章主要介紹了Vant中List組件immediate-check=false無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Vant中List組件immediate-check=false無效

使用vant中的List組件時,會有這樣的場景

初始化時想自己觸發(fā)列表查詢,而不想觸發(fā) List 組件自帶的 load 方法,這時可以設(shè)置 immediate-check=false,如下代碼,但是這種方式會在下面的場景中出現(xiàn)問題

 <van-list
     ref="vanlist"
     v-model="loading"
     :finished="finished"
     finished-text="已顯示全部周報"
     :error.sync="error"
     error-text="請求失敗,點擊重新加載"
     :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時,只執(zhí)行 created 中的 getWorkList 方法,不觸發(fā) List 組件中的 getWorkList
  • 異常:但是由于A中內(nèi)容超過一屏,頁面滾動到底部后,再點擊跳轉(zhuǎn)到B時,就會將 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動條的監(jiān)聽事件,滾動條與底部距離小于offset 時,load事件該觸發(fā)還是會觸發(fā)。

因此,immediate-check屬性準確的說明應(yīng)該是:

是否在初始化時立即執(zhí)行滾動位置檢查(滾動條與底部距離小于offset 時設(shè)置無效

Vant list組件使用的坑

1.解決請求兩次數(shù)據(jù)重復(fù)

把finish的初始值設(shè)置為true,然后添加 immediate-check=true

2.如何判斷finish為true的情況

一般看網(wǎng)絡(luò)請求返回的是code是否為錯誤碼

3.每次切換tabs欄目必須讓變量finish的值更新為false這樣才會在上拉的時候重新去發(fā)送ajax請求去加載數(shù)據(jù)。

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能

    Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能

    這篇文章主要介紹了Vue+Element實現(xiàn)動態(tài)生成新表單并添加驗證功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue3實現(xiàn)九宮格抽獎效果的示例詳解

    Vue3實現(xiàn)九宮格抽獎效果的示例詳解

    這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的九宮格抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下
    2023-10-10
  • 在axios中使用params傳參的時候傳入數(shù)組的方法

    在axios中使用params傳參的時候傳入數(shù)組的方法

    今天小編就為大家分享一篇在axios中使用params傳參的時候傳入數(shù)組的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過程

    Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過程

    這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別

    vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別

    這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue3中虛擬dom轉(zhuǎn)成真實dom的過程詳解

    Vue3中虛擬dom轉(zhuǎn)成真實dom的過程詳解

    Vue.js?在其運行過程中會將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實際的?DOM?節(jié)點,這個過程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實dom的過程,需要的朋友可以參考下
    2024-09-09
  • electron踩坑之remote of undefined的解決

    electron踩坑之remote of undefined的解決

    這篇文章主要介紹了electron踩坑之remote of undefined的解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • Vue基礎(chǔ)知識快速入門教程

    Vue基礎(chǔ)知識快速入門教程

    這篇文章主要介紹了Vue基礎(chǔ)知識快速入門教程,我們可以先學(xué)會用,使用一段時間之后,回頭來熟悉一下Vue框架以及它的特點,需要的朋友可以參考下
    2023-05-05
  • Vue項目部署到IIS后刷新報錯404的問題及解決方法

    Vue項目部署到IIS后刷新報錯404的問題及解決方法

    這篇文章主要介紹了Vue項目部署到IIS后,刷新報錯404,這里需要用到URL重寫工具?--URL?Rewrite,需要的話需要自己下載安裝,本文通過圖文并茂的形式給大家介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • vue+openlayers繪制省市邊界線

    vue+openlayers繪制省市邊界線

    這篇文章主要為大家詳細介紹了vue+openlayers繪制省市邊界線,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12

最新評論