Vue.js가 무한 스크롤 로딩을 구현하는 방법에 대해

이제 무한 스크롤과 더 많은 메소드 로딩을 ​​달성하기 위한 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:&#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="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(&#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;
  }
  },

여기서 중요한 것은 현재 페이지가 0, 즉 첫 번째 페이지일 때 Timeout 타이머를 설정할 필요가 없으며 직접 로딩을 요청하고 더 많은 것이 로드되면 타이머를 추가합니다.

추가 로드를 위한 풀업을 구현하는 mint-ui loadmore 구성 요소를 인터넷에서 많이 찾았습니다. 풀업이 해당 로드 모어 이벤트를 트리거하기 때문에 페이지에 들어갈 때 데이터가 자동으로 로드되지 않아야 하므로 여기에 하나를 추가하여 데이터의 첫 번째 페이지 기능을 얻을 수 있습니다.

위 내용은 제가 정리한 내용입니다. 많은 분들께 도움이 되었으면 좋겠습니다

관련 글:

vue-cli에서 webpack3 속도 향상 최적화 관련 이슈

abs 사용에 대해 자세히 설명해주세요. EasyUI

zTree

에서 대화형 탭을 구현하는 방법

위 내용은 Vue.js가 무한 스크롤 로딩을 구현하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!