無限スクロール読み込みを実現するVue.jsのモバイルコンポーネントライブラリmint-uiの詳細解説 もっと見る

多くのくぐり抜けた結果、より多くのコンポーネントを読み込むためにスクロールを監視するこれらの方法が共通していることがわかりました。より多くのコンポーネントを読み込むこれらの方法は、より多くのコンテンツを読み込む必要がある要素にバインドされているため、ページに入るときに直接ページに入ることができます。一度トリガーされ、スクロール イベントをリッスンした後、さらにロードを続けるため、無限スクロール ロード用の最初のロード リストの関数を記述する必要はありません。この記事では、無限スクロールとより多くのメソッドの読み込みを実現するための 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('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 ロードモア コンポーネントをインターネット上でたくさん見つけました。プルアップは対応するロードモアイベントをトリガーするため、ページに入るときにデータが自動的にロードされるべきではありません。データの最初のページの関数をここに追加できます。

関連する推奨事項:

ネイティブ JS の詳細な説明は、スクロールに同期して追従する複数のスクロール バーを制御することです

vue でスクロールとより多くの機能を実装する方法

無限を実現する CSS3 の詳細な説明ループシームレススクロール

以上が無限スクロール読み込みを実現するVue.jsのモバイルコンポーネントライブラリmint-uiの詳細解説 もっと見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。