一個完整最少代碼的上拉加載(mint-ui的loadmore 和 vue)


這是一個上拉加載的最減代碼,其中上拉的數據加載你們自己弄,我這只做的一個演示。

html代碼:

<div id="content">
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
           <div class="item" v-for="data in list">
                <div class="name">{{data.name}}</div>
           </div>
    </mt-loadmore>
</div>

CSS代碼:

<link rel="stylesheet" href="../assert/mint_ui/style.css"/>
    <style> #content{ overflow: scroll; } .item{ } .item .name{ height: 200px; background-color: green; margin-bottom: 10px; } </style>

JavaScript的代碼:

<script src="../assert/mint_ui/vue.js"></script>
<script src="../assert/mint_ui/index.js"></script>
<script> var p = 10; var vue = new Vue({ el:"#content", data:{ list:[], allLoaded:false }, methods:{ loadBottom: function(){ this.$refs.loadmore.onBottomLoaded(); this.getList(); }, getList: function(){ var i = 0,list0 = []; for(i ; i < p;i ++){ list0.push({demo:i}); } p+=10; this.list = list0; } }, mounted: function(){ this.getList(); } }) </script>

這段代碼的缺點:每次只要你把它布置道瀏覽器上,必須先把JavaScript中的 allLoaded的值改為true,不然他會一直加載。(瀏覽器會一直調用loadBottom這個函數,而這個函數當allLoaded為false的時候就可以加載,所以要改值),然后跳到瀏覽器的開發者模式的手機模式,再把值改回來,就可以正常使用了。有點學藝不精啊,大家多指點下。
(allLoaded:為false時,說明你還沒有加載完,可以繼續加載;為true時,說明你已經加載完了,不能再繼續加載

:auto-fill=”false” 意思是當你還沒有滑到底部時(其實是與底部距離不超過最大:max-distance=”150”),不加載。 如果不寫的話,在手機端有問題,每上拉一次就會進行一次加載。

this.allLoaded = true;
設定不能再上拉加載。加載完之后可以設這個屬性。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com