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