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