vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題

更新時間：2022年04月25日 16:16:18 作者：船長在船上

這篇文章主要介紹了vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

van-sidebar數(shù)據(jù)超出不能滑動

問題：項目中使用了van-popup彈出層加載子組件內(nèi)容，子組件使用了van-sidebar側(cè)邊導航

解決方法

lock-scroll：是否鎖定背景滾動

<van-popup v-model="showLaodingport" position="bottom" :style="{ height: '100%'}" :lock-scroll="false">
? ? ? ? //子組件
? ? ? <loadingPort @child="fromLoadingport"/>
?</van-popup>

默認是true，設置為false即可。

最近項目中使用vant的一些總結(jié)

vantUi是有贊團隊開發(fā)的一款針對于小程序及手機端的一款UI框架

使用時非常方便但是其中一些bug也很多把項目中遇到的坑及小tipes分享一下

供自己記憶同時也分享給大家

好好讀文檔好好讀文檔好好讀文檔 !important

List 列表

list列表組件完全是全自動的

自動請求、自動刪除loading、頁面刷新自動更新。。。

總之在list中你只要做兩件事：

在請求數(shù)據(jù)== 數(shù)據(jù)庫數(shù)據(jù) 時給list一個finished狀態(tài)
填寫你所需要的請求函數(shù)

重用list導致的bug

在寫如上代碼時重用list列表 --導致左右擊后每次選擇條件onload函數(shù)會觸發(fā)兩變

bug分析：

由于每次切換當有的頁面加載完成后finished狀態(tài)會改變，

當其重新開啟的時候會觸發(fā)一次onload函數(shù)而我們正常來說也會手動觸發(fā)一次請求數(shù)據(jù)

所以在每次請求時候判斷一下 finished改變的時候就不要重新手動觸發(fā)onload函數(shù)了

如下：

 if (this.page) {
        sn = 2;
        this.listForMaine = [];
        this.startAt = 0;
        if(this.myFinished){
          this.myFinished= false;
          hasChanged = true
        } 
      } else {
        sn = 1;
        this.listForExmation = [];
        this.startAtExamtion = 0;
        if(this.myExaminationinished){
          // changed
          this.myExaminationinished= false;
          hasChanged = true
        } 
      } 
      if(!hasChanged){
        this.getSourceDate(sn)
      }