下面我就為大家分享一篇Vue.js 的行動端元件庫mint-ui實現無限滾動載入更多的方法,具有很好的參考價值,希望對大家有所幫助。
透過多次爬坑,發現了這些監聽滾動來載入更多的元件的共同點,
因為這些載入更多的方法是綁定在需要載入更多的內容的元素上的,
所以是進入頁面則直接觸發一次,當監聽到滾動事件之後,繼續加載更多,
所以對於無限滾動加載不需要寫首次載入列表的函數,
程式碼如下:
#html:
//父组件 <p v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000"> <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists> </p> //LifeLists组件: <LifeListItem :lists="lifeList"></LifeListItem> <p class="loading-text" v-show="{loadingTextBtn:true}"> <span v-text="loadingText"></span> <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner> </p> LifeListItem组件: <p id="lifeListItemBox"> <router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index"> <p class="lifeListItem1" v-if="(item.status=='online')"> <p v-if="(item.hasPrice==true)"> <p class="title1">{{item.title}}</p> <p class="price"> <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b> </p> </p> <p v-else class="title2">{{item.title}}</p> <p class="info"> 发布于{{formatTime(item.createAt)}} {{item.countryName}} {{item.cityName}} </p> <p class="imageList"> <img :src="img" alt="" v-for="(img,index) in item.photos"> </p> <p class="content">{{item.detail}}</p> <p class="listBar"> <p class="iconBox"> <svg class="icon icon-dianzan" aria-hidden="true"> <use xlink:href="#icon-dianzan" rel="external nofollow" ></use> </svg> {{item.like}} </p> <p class="iconBox"> <svg class="icon icon-pinglun2" aria-hidden="true"> <use xlink:href="#icon-pinglun2" rel="external nofollow" ></use> </svg> {{item.commentCount}} </p> </p> </p> </router-link> </p>
vue. js
data:
page:0, size:10, loadingTextBtn:false, loadingText:"努力加载中", loadingComplete:false, refreshComplete:false, city:"", country:""
methods:
loadMore() { this.loading = true; this.loadingTextBtn=true; if(parseInt(this.page)==0){ this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size}); this.page++; }else if(parseInt(this.page)>0&&parseInt(this.page)<parseInt(this.totalPages)){ setTimeout(() => { // this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size}) this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size}); this.page++; }, 1000); }else{ this.loadingText="已全部加载完成"; this.loadingComplete=true; this.loading = false; } },
這裡重要的是判斷,噹噹前頁面為0的時候,即第一頁的時候,不需要setTimeout定時器,直接請求加載,當加載更多的時候可以加個定時器。
網路上找到很多mint-ui 的loadmore元件來實現上拉加載更多,由於上拉觸發相應的加載更多事件,所以當進入頁面的時候應該不會自動載入數據,則這裡可以增加一個取得第一頁資料的函數。
以上就是我整理的文字,希望對大家有幫助
相關文章:
#以上是有關Vue.js如何實現無限滾動加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!