mint-ui loadmore pull-up loading and pull-down refresh conflict handling method

This time I will bring you the conflict handling method between mint-ui loadmore pull-up loading and pull-down refresh. What are the precautions for handling the conflict between mint-ui loadmore pull-up loading and pull-down refresh? The following is a practical case, let’s take a look.

Problems encountered:

This page is a dual-tab linkage. All four parts require pull-up loading and pull-down refresh functions. The loadmore plug-in of mint-ui is used. After adding pull-up loading respectively, only the last one has this.$refs. loadmore.onTopLoaded();andthis.$refs.loadmore.on<a href="http://www.php.cn/wiki/906.html" target="_blank">Bottom</a>Loaded();

Valid, the other three are invalid. These two sentences mean that query needs to be called once for relocation

Analysis of the reason:

First of all, these four modules are used 　　　　

<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, and bottom-all-loaded are given different event names respectively. The first two events represent pull-down and pull-up respectively. If the third one is true, bottomMethod will not be loaded again. Triggered, generally when entering the page we default to false

When calling the interface , the judgment of canceling the loading is made after the success. Here you can give the interface method a type value. If the type is top1, it proves that the ongoing pull-down refresh execution this.$refs.loadmore1 .onTopLoaded();, the same applies to pull-up loading, and the other three modules

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

When you get here, the problem described at the beginning will appear,

Solution

I made a lot of attempts at the beginning, such as using v-if to hide the other three modules when one module is displayed, but different problems always occurred. Later, the parameters after ref in ref="loadmore" were used in four modules. For example, the distinction is loadmore1, loadmore2..., here is how I understand it, ref The function here is to specify an index ID for the subcomponent, which is similar to the id of the dom element. The id name cannot be the same, so we change the ref to a different parameter and the problem is solved,

Attached is the Vue official website linkhttps://vuejs.org/

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

PS: Mint-ui loadmore component attention issues

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

For example, when doing pull-down refresh, remember to add

this.$refs.loadmore.onTopLoaded();

in the pull-down refresh function. This line of code, otherwise the loading will always be displayed after the drop-down loading, and the loading will not be completed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of mint-ui loadmore pull-up loading and pull-down refresh conflict handling method. For more information, please follow other related articles on the PHP Chinese website!