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

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

発生した問題:

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

event

インターフェース

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

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

https://vuejs.org/

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();
},

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