Vue.jsのモバイルコンポーネントライブラリmint-UIで無限スrollして更多をロードする方法

多くの試行錯誤を重ねて、これらのスクロールを監視してロードするコンポーネントの共通点を見つけました。

これらのロードメソッドは、ロードする必要があるコンテンツの要素にバインドされているため、

したがって、ページにアクセスするときに一度だけトリガーされ、スクロールイベントが検出された後、さらにロードを続けます。

したがって、無限スrollロードには初期ロードリストの関数を書かない必要はありません。

以下のコード：

html:

//親コンポーネント
<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コンポーネント：
<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コンポーネント：
<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">
    发布于{{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:"努力加载中",
  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のloadmoreコンポーネントを使用して上拉してさらに多くのロードを行う方法ですが、上拉がロードイベントをトリガーするため、ページにアクセスしたときにはデータが自動的にロードされないようにする必要があります。そのため、ここでは最初のページのデータを取得する関数を追加することができます。

以下のVue.jsのモバイル端末コンポーネントライブラリmint-UIが無限にロードする方法を紹介しましたが、これは私たちが皆さんに提供する全ての内容であり、皆さんに参考になれば幸いです。また、教材のサポートと応援をお願いします。

声明：この記事の内容はインターネットから取得しており、著作権者は所有者であり、インターネットユーザーが自発的に貢献し、アップロードしたものであり、このサイトは所有権を持ちません。また、人工編集は行われておらず、関連する法的責任を負いません。著作権侵害の疑いがある場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時、#を@に変更してください）で通報し、関連証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害される内容を削除します。

基本教程