mint-ui 中 Infinite scroll 在tab-container中使用數據全部加載的問題


項目中用到了Infinite scroll 這個組件,但是初始化的時候,getList總會請求兩次,

網上查了部分資料,如

<ul class="mui-table-view " v-infinite-scroll="getList"
			    infinite-scroll-disabled="loading" 
			    infinite-scroll-distance="0">

中的v-infinite-scroll等指令要放在ul標簽上,ul 的父標簽必須加固定高度,ajax獲取成功后加上setTime渲染,經測試,均為生效,后來看到官方api,還有一個infinite-scroll-immediate-check的屬性,默認為true,再次更改為false,初始化就不會請求兩次接口了;

 

但是此方法在和mint-ui 中的tab-container結合使用時,getList會出現一直調用,直到所有的數據都加載完畢,想着應該是窗體切換時,公用同一個窗體高度造成的;

因為在tab-container中的mt-tab-container-item 增加v-if 即可;經驗證此方式可行。

<mt-tab-container v-model="active">
  <mt-tab-container-item id="tab-container1"  v-if=“active == ‘tab-container1’ ”>
    <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2">
    <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
  </mt-tab-container-item>
</mt-tab-container>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM