下拉刷新組件的dom結構

   <div id="refreshContainer" class="mui-scroll-wrapper">
     <div id="refreshBox">
       <div class="active" id="tab1"></div>
       <div id="tab2"></div>
       <div id="tab3"></div>
     </div>
   </div>

css 被mui坑的- -。。。

/*因為下拉圖標位置設置無效  則使用下拉刷新組件樣式*/
.mui-pull-top-pocket{
  top: 5rem !important;
}
/*把列表展示在你想要的位置 */
#refreshContainer{
 height:100vh;
 padding-top: 2.2rem;
 padding-bottom: 3rem;
}

js邏輯

//多tab頁切換時
function onTabChange(){
  $('#refreshBox').css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')//切換時默認滾動到頂部，否則會出現多個tab同時滾動導致其他列表出現問題
 mui('#refreshContainer').pullRefresh().refresh(true);//重置上拉加載組件
}

//多個tab共用一個下拉刷新組件
  mui.init({
    pullRefresh: {
      container: "#refreshContainer", //下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
      down: {
        callback: function () {
     //列表刷新完成後，需要及時關閉對應的動畫，否則會出現無效的問題
      mui("#refreshContainer").pullRefresh().endPulldownToRefresh();//結束動畫
  },
      },
      up: {
        callback:   function () {
  ...
      mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);//上拉加載時false表示還有數據
  },
      },
    },
  });