vant遇到van-sidebar數(shù)據(jù)超出不能滑動(dòng)的問(wèn)題

更新時(shí)間：2022年04月25日 16:16:18 作者：船長(zhǎng)在船上

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

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

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

解決方法

lock-scroll：是否鎖定背景滾動(dòng)

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

默認(rèn)是true，設(shè)置為false即可。

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

vantUi是有贊團(tuán)隊(duì)開(kāi)發(fā)的一款針對(duì)于小程序及手機(jī)端的一款UI框架

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

供自己記憶同時(shí)也分享給大家

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

List 列表

list列表組件完全是全自動(dòng)的

自動(dòng)請(qǐng)求、自動(dòng)刪除loading、頁(yè)面刷新自動(dòng)更新。。。

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

在請(qǐng)求數(shù)據(jù)== 數(shù)據(jù)庫(kù)數(shù)據(jù) 時(shí)給list一個(gè)finished狀態(tài)
填寫(xiě)你所需要的請(qǐng)求函數(shù)

重用list導(dǎo)致的bug

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

bug分析：

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

當(dāng)其重新開(kāi)啟的時(shí)候會(huì)觸發(fā)一次onload函數(shù)而我們正常來(lái)說(shuō)也會(huì)手動(dòng)觸發(fā)一次請(qǐng)求數(shù)據(jù)

所以在每次請(qǐng)求時(shí)候判斷一下 finished改變的時(shí)候就不要重新手動(dòng)觸發(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)
      }