Vue.js Mobile Component Library Mint-Method for Implementing Infinite Scrolling and Loading More Data in UI

Through multiple pitfalls, I found the common points of these components that load more by listening to the scroll event.

Because these methods for loading more are bound to the elements that need to load more content.

Therefore, it triggers once directly when entering the page, and continues to load more after listening to the scroll event.

Therefore, for infinite scrolling loading, there is no need to write a function to load the initial list.

The code is as follows:

html:

//Parent component
<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 component:
<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 component:
<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">
    Published at {{formatTime(item.createAt)}}
        
    {{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" rel="external nofollow" ></use>
    </svg>
    {{item.like}}
    </div>
    <div class="iconBox">
    <svg class="icon icon-pinglun2" aria-hidden="true">
     <use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
    </svg>
    {{item.commentCount}}
    </div>
   </div>
   </div>
  </router-link>
</div>

vue.js

data:

page: 0,
  size:10,
  loadingTextBtn: false,
  loadingText: "Loading hard",
  loadingComplete: false,
  refreshComplete: false,
  city: "",
  country: "",

methods:

loadMore() {
  this.loading = true;
  this.loadingTextBtn = true;
  if (parseInt(this.page) == 0) {
   this.$store.dispatch('loadMoreLifeList',{city:"New York",country:"United States",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:"New York",country:"United States",category:"",page:this.page,size:this.size});
    this.page++;
   }, 1000);
  }else{
   this.loadingText="All content has been loaded successfully";
   this.loadingComplete=true;
   this.loading = false;
  },
  },

Here, it is important to judge that when the current page is 0, that is, the first page, there is no need for a setTimeout timer, and the data can be loaded directly. When loading more, a timer can be added.

Many mint-ui's loadmore component to implement pull-up loading more, since the pull-up triggers the corresponding loading more event, so when entering the page, the data should not be loaded automatically. Therefore, a function to obtain the first page of data can be added here.

The above article on Vue.js mobile component library mint-The method of implementing infinite scrolling to load more content in ui is all the content shared by the editor, hoping to provide a reference for everyone, and also hope that everyone will support and cheer for the tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)