mui 多个tab页实现下拉刷新上拉加载

下拉刷新组件的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表示还有数据
  },
      },
    },
  });