关于mui: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 示意还有数据
  },
      },
    },
  });