By climbing the pit many times, we found the common point of these monitoring scrolls to load more components,

Because these load more methods are bound to the elements that need to load more content,

Therefore, when the monitor hears the scrolling event, it will continue to load more,

So for infinite scrolling, you don't need to write the first load list function,

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 components:

<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 Components:

<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 in{{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:"Trying to load",
        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:"U.S.A",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:"U.S.A",category:"",page:this.page,size:this.size});
              this.page++;
          }, 1000);
        }else{
          this.loadingText="All loaded";
          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, you don't need a setTimeout timer. You can directly request to load. When you load more, you can add a timer.

A lot of load more components of mint UI are found on the Internet to realize pull-up and load more. Because pull-up triggers corresponding load more events, when entering the page, data should not be loaded automatically. Here you can add a function to get the data of the first page.