About how Vue.js implements infinite scroll loading

Below I will share with you an article on how to implement infinite scrolling and loading more methods using the Vue.js mobile component library mint-ui. It has a good reference value and I hope it will be helpful to everyone.

Through crawling many times, I discovered the commonality of these monitoring scrolling to load more components,

Because these methods of loading more are bound to the need to load more content. on the element,

So when entering the page, it will be triggered directly once. After the scroll event is monitored, continue to load more,

So there is no need to write the first load list for infinite scroll loading. The function,

code is as follows:

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:&#39;lifeDetails&#39;,params:{id:item.id}}" :key="index">
   <p class="lifeListItem1" v-if="(item.status==&#39;online&#39;)">
   <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="/static/imghwm/default1.png"  data-src="img"  class="lazy"  : 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(&#39;loadMoreLifeList&#39;,{city:this.city,country:this.country,category:"",page:this.page,size:this.size})
    this.$store.dispatch(&#39;loadMoreLifeList&#39;,{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});
    this.page++;
   }, 1000);
  }else{
   this.loadingText="已全部加载完成";
   this.loadingComplete=true;
   this.loading = false;
  }
  },

The important thing here is to judge that when the current page is 0, that is, the first page, no A setTimeout timer is required to request loading directly. When more is loaded, a timer can be added.

I found a lot of mint-ui loadmore components on the Internet to implement pull-up to load more. Since the pull-up triggers the corresponding load more event, the data should not be automatically loaded when entering the page, so here You can add a function to get the first page of data.

The above is the text I compiled, I hope it will be helpful to everyone

Related articles:

Issues related to webpack3 speed optimization in vue-cli

Explain in detail the use of abs in EasyUI

How to implement interactive tabs in zTree

The above is the detailed content of About how Vue.js implements infinite scroll loading. For more information, please follow other related articles on the PHP Chinese website!