mint-ui loadmore 풀업 로딩 및 풀다운 새로 고침 충돌 처리 방법

이번에는 mint-ui loadmore에서 풀업 로딩과 풀다운 새로고침 충돌을 처리하는 방법을 알려드리겠습니다. 민트에서 풀업 로딩과 풀다운 새로고침 충돌을 처리할 때 주의사항은 무엇인가요- ui loadmore. 다음은 실제 사례를 한 번 살펴보겠습니다.

발생한 문제:

이 페이지는 듀얼 탭 연동입니다. 4개 부분 모두 풀업 로딩과 풀다운 새로 고침 기능이 필요합니다. mint-ui의 loadmore 플러그인을 이용하여 각각 풀업 로딩을 추가한 후 마지막 만 확인하세요. .$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();

有效，其他的三个都无效，这两句话是意思是查询完要调用一次，用于重新定位 

分析原因：

首先这四个模块都是用的     

<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分别赋予不同的事件名，前两个事件分别表示下拉，上拉，第三个若为真，则 bottomMethod 不会被再次触发，一般进入页面我们默认为false

调用接口成功后进行的取消加载的判断，这里可以给接口的方法一个type值，如果type为top1时则证明正在进行的是下拉刷新执行this.$refs.loadmore1.onTopLoaded();Loaded();

유효, 나머지 3개는 유효하지 않습니다. 이 두 문장은 Query

End 한 번 호출된다는 의미입니다. 재배치용

분석 이유: 우선 이 4개의 모듈이 사용됩니다 　　　　

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

top-method와 Bottom-method, Bottom-all-loaded에는 서로 다른 이벤트가 할당됩니다. name. 처음 두 이벤트는 각각 풀다운과 풀업을 나타냅니다. 세 번째 이벤트가 true인 경우 일반적으로 페이지에 들어갈 때 기본적으로 false가 실행됩니다

로딩을 성공적으로 취소할지 여부를 결정하기 위해 인터페이스

를 호출한 후 인터페이스 메소드에 유형 값을 지정할 수 있습니다. 유형이 top1인 경우 풀다운 새로 고침 실행이 this.$refs.loadmore1.onTopLoaded(); 진행 중임을 증명하는 경우 풀업 로드의 경우에도 마찬가지입니다. 다른 세 모듈에도 해당됩니다

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

여기까지 오면 처음에 설명한 문제가 나옵니다,

솔루션 처음에는 하나의 모듈이 표시될 때 다른 3개의 모듈을 숨기기 위해 v-if를 사용하는 등 많은 시도를 했지만, 나중에는 ref="loadmore"의 ref 이후의 매개변수가 4개에서 사용되었습니다. 예를 들어, loadmore1, loadmore2...로 구분됩니다. 제가 이해한 방법은 다음과 같습니다. 여기서 기능은 dom 요소의 ID와 유사한 하위 구성 요소에 대한

index

ID를 지정하는 것입니다. ID 이름은 동일할 수 없으므로 참조를 다른 매개 변수로 변경하면 문제가 해결됩니다.

첨부된 Vue 공식 홈페이지 링크

https://

vuejs.org/

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

PS: mint-ui loadmore 구성 요소 주의 문제

this.$refs.loadmore.onTopLoaded();

예를 들어 풀다운 새로 고침을 수행할 때 풀다운 새로 고침 기능에 🎜rrreee🎜를 추가하는 것을 잊지 마세요. 이 코드 줄은 그렇지 않으면 항상 드롭다운 로딩 후에 로딩을 표시하며 로딩이 완료되지 않습니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 mint-ui loadmore 풀업 로딩 및 풀다운 새로 고침 충돌 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!