基於 Vue.js 的移動端組件庫mint-ui實現無限滾動式載入更多

標籤：show   yun   重要   lists   上拉載入更多   content   settime   isp   mon   

通過多次爬坑，發現了這些監聽滾動來載入更多的組件的共同點，

因為這些載入更多的方法是綁定在需要載入更多的內容的元素上的，

所以是進入頁面則直接觸發一次，當監聽到滾動事件之後，繼續載入更多，

所以對於無限滾動式載入不需要寫首次載入列表的函數，

代碼如下：

html:

//父組件<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">          <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists></div>//LifeLists組件：<LifeListItem :lists="lifeList"></LifeListItem>        <div class="loading-text" v-show="{loadingTextBtn:true}">          <span v-text="loadingText"></span>          <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner></div>LifeListItem組件：<div id="lifeListItemBox"><router-link v-for="(item,index) in lists" :to="{name:‘lifeDetails‘,params:{id:item.id}}" :key="index">          <div class="lifeListItem1" v-if="(item.status==‘online‘)">            <div v-if="(item.hasPrice==true)">              <div class="title1">{{item.title}}</div>              <div class="price">                <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>              </div>            </div>            <div v-else class="title2">{{item.title}}</div>            <div class="info">              發佈於{{formatTime(item.createAt)}}              &nbsp;&nbsp;&nbsp;&nbsp;              {{item.countryName}} {{item.cityName}}            </div>            <div class="imageList">              <img :src="img" alt="" v-for="(img,index) in item.photos">            </div>            <div class="content">{{item.detail}}</div>            <div class="listBar">              <div class="iconBox">                <svg class="icon icon-dianzan" aria-hidden="true">                  <use xlink:href="#icon-dianzan"></use>                </svg>                {{item.like}}              </div>              <div class="iconBox">                <svg class="icon icon-pinglun2" aria-hidden="true">                  <use xlink:href="#icon-pinglun2"></use>                </svg>                {{item.commentCount}}              </div>            </div>          </div>        </router-link></div>

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 的移動端組件庫mint-ui實現無限滾動式載入更多