mint-ui が無限スクロール読み込み機能を実装する方法

今回は、mint-uiが無限スクロールロード機能を実装する方法を紹介します。 何度もピットを登るうちに、より多くのコンポーネントをロードするためにスクロールを監視するという共通点を発見しました。 さらに読み込むこれらのメソッドは、より多くのコンテンツを読み込む必要がある要素にバインドされているため、

したがって、ページに入ると、スクロール

イベント

が検出されると、直接トリガーされ、さらに読み込みを続けます

。 したがって、無限スクロール読み込みの場合、最初の読み込みリスト に

関数

を記述する必要はありません。 コードは次のとおりです:

html:

りー

vue.js

データ:りぃ メソッド:

//父组件
<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>

ここで重要なのは、現在のページが 0、つまり最初のページの場合、setTimeout

タイマー

を行う必要がないと判断し、それ以上読み込まれた場合に、タイマーを追加できるようにすることです。

インターネット上で、さらにロードするためのプルアップを実装するための mint-ui ロードモア コンポーネントをたくさん見つけました。プルアップは対応するロードモアイベントをトリガーするため、ページに入るときにデータが自動的にロードされるべきではないので、追加することができます。 1 つは最初のページ データ関数を取得するためのものです。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular はテーブルのフィルタリングと削除関数を実装します

JS で電卓関数を実装する最も簡単な方法

以上がmint-ui が無限スクロール読み込み機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。