Solve the problem that the Vue uses mint-ui loadmore to implement pull-up loading and pull-down refresh. After a page is loaded using multiple pull-up operations, mint-uiloadmore

Solve the problem that the Vue uses mint-ui loadmore to implement pull-up loading and pull-down refresh. After a page is loaded using multiple pull-up operations, mint-uiloadmore

Problems:

This page is associated with two tabs. The four parts require the pull-up and pull-down refresh functions. The loadmore plug-in of mint-ui is used to add the pull-up and load plug-ins respectively, and only the last onethis.$refs.loadmore.onTopLoaded();Andthis.$refs.loadmore.onBottomLoaded();

Valid, and none of the other three are valid. The two statements mean that the query must be called once and used for locating again.

Cause analysis:

First, all 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+'walletdetail1'" @click="choose(index)">      <div class="checkboxOne">      <input type="checkbox" name="checkInput" :id="'id1' + index" v-model="item.checked" disabled/>      <label :for="'id1' + index"></label>      </div>      <div class="left-text">      <p class="award">{{item.a}}</p>      <p class="time">{{item.b}}</p>      </div>      <div class="right-text">      <p class="addinfo">￥{{item.c}}</p>      </div>     </li>     </ul>    </mt-loadmore>

Top-method and bottom-method, and bottom-all-loaded respectively assign different event names. The first two events indicate drop-down, pull-up, and the third event is true, the bottow.hod will not be triggered again. Generally, when you enter the page, the default value is false.

Determine whether to cancel loading after the interface is called successfully. Here we can give the interface method A type value. If the type is top1, it indicates that the operation is being executed by pulling down and refreshing.this.$refs.loadmore1.onTopLoaded();The same applies to the pull-up and load operations. The same applies to the other three modules.

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

The problem described at the beginning will appear here,

Solution

I made many attempts at the beginning, for example, using v-if to hide the other three when a module is displayed, there will always be different problems, later, we divided the ref parameters in ref = "loadmore" into four modules, for example, loadmore1, loadmore2 ......, Here I understand it as follows. The function of ref is to specify an index ID for the sub-component, which is similar to the id of the dom element. The id name cannot be the same, so we modify ref to different parameters, problem solving,

Vue official website link https://vuejs.org/

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

PS: mint-ui loadmore component considerations

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

For example, when performing a pull-down refresh, remember to add

this.$refs.loadmore.onTopLoaded();

This line of code. Otherwise, the load is always displayed after the drop-down and will not be completed.

Summary

The above section describes the Vue Using mint-ui loadmore to implement pull-up loading and pull-down refresh. A conflict occurs after multiple pull-up loads are used on a page. I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!