项目中用到了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>
来源:oschina
链接:https://my.oschina.net/u/4368300/blog/3797083