mint-ui loadmore プルアップのロードとプルダウンのリフレッシュの競合処理方法

今回は、mint-uiのloadmoreでプルアップのロードとプルダウンのリフレッシュの競合を処理する方法についてお届けします。mint-のプルアップのロードとプルダウンのリフレッシュの競合を処理するための注意事項とは何ですか。 uiloadmore 次に実際のケースを見てみましょう。

発生した問題:

このページはデュアルタブリンクです。mint-ui のloadmore プラグインを使用すると、4 つの部分すべてにプルアップロードとプルダウンリフレッシュ機能が必要になります。後は、最後の this のみです。 .$refs.loadmore.onTopLoaded(); と this.$refs.loadmore.on<a href="http://www.php.cn/wiki/906.html" target=" _blank">下 <code>this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.on<a href="http://www.php.cn/wiki/906.html" target="_blank">Bottom</a>Loaded();Loaded();

有効、他の 3 つは無効です。これらの 2 つの文は、再配置のために クエリ を 1 回呼び出す必要があることを意味します。 理由の分析:

まず使用するモジュールはこの4つ

<mt-loadmore :top-method="loadTop"
     :bottom-method="loadBottom"
     :bottom-all-loaded="allLoaded"
     ref="loadmore">
     <ul class="ul-box">
     <li class="list-cell ta-line" v-for="(item,index) in gridNoPayMail" :key="item+&#39;walletdetail1&#39;" @click="choose(index)">
      <p class="checkboxOne">
      <input type="checkbox" name="checkInput" :id="&#39;id1&#39; + index" v-model="item.checked" disabled/>
      <label :for="&#39;id1&#39; + index"></label>
      </p>
      <p class="left-text">
      <p class="award">{{item.a}}</p>
      <p class="time">{{item.b}}</p>
      </p>
      <p class="right-text">
      <p class="addinfo">￥{{item.c}}</p>
      </p>
     </li>
     </ul>
    </mt-loadmore>

top-method、bottom-method、bottom-all-loaded にはそれぞれ異なる

event

名が与えられます。最初の 2 つのイベントはそれぞれプルダウンとプルアップを表します。3 番目のイベントが true の場合、bottomMethod は再度トリガーされません。通常、ページのデフォルトは false と入力します

インターフェース

の呼び出しに成功した後にロードをキャンセルするかどうかを決定するには、インターフェースのメソッドに type 値を指定します。type が top1 の場合、プルダウン更新の実行が進行中であることがわかります

についても同様です。他の 3 つのモジュールも同じです。 ここまで来ると、冒頭で説明した問題が発生します this.$refs.loadmore1.onTopLoaded();

解決策

最初は v-if を使って 1 つのモジュールが表示されているときに他の 3 つのモジュールを非表示にするなど、さまざまな試みをしましたが、後から ref="loadmore" の ref 以降のパラメータが 4 つで使用されてしまい、常に別の問題が発生しました。たとえば、モジュールの違いは、loadmore1、loadmore2... です。これを私は次のように理解しています。 ここでの機能は、サブコンポーネントの index ID を指定することです。これは、dom 要素の ID に似ています。ID 名を同じにすることはできないため、ref を別のパラメーターに変更すると、問題は解決されます。

Vue公式Webサイトのリンクを添付します

https://vuejs.org/

mint-ui：https://mint-ui.github.io/docs/#/en2/loadmore

追記：mint-uiのloadmoreコンポーネントの注意の問題

if(type=='top1'){
   this.$refs.loadmore1.onTopLoaded();
   }else if(type=='bottom1'){ 
this.$refs.loadmore1.onBottomLoaded();
｝

たとえば、プルダウン更新を行う場合は、プルダウン更新関数に

loadTop(){
    this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size});
    this.$refs.loadmore.onTopLoaded();
},

を忘れずに追加してください。 このコード行を指定しないと、ドロップダウンの読み込み後に常に読み込み中と表示され、読み込みは完了しません。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がmint-ui loadmore プルアップのロードとプルダウンのリフレッシュの競合処理方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。