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

下拉刷新组件的dom结构

1.    <div id="refreshContainer" class="mui-scroll-wrapper">
   
2.      <div id="refreshBox">
   
3.        <div class="active" id="tab1"></div>
   
4.        <div id="tab2"></div>
   
5.        <div id="tab3"></div>
   
6.      </div>
   
7.    </div>

复制代码

css 被mui坑的- -。。。

1. /*因为下拉图标位置设置无效  则使用下拉刷新组件样式*/
   
2. .mui-pull-top-pocket{
   
3.   top: 5rem !important;
   
4. }
   
5. /*把列表展示在你想要的位置 */
   
6. #refreshContainer{
   
7. height:100vh;
   
8. padding-top: 2.2rem;
   
9. padding-bottom: 3rem;
   
10. }

复制代码

js逻辑

1. //多tab页切换时
   
2. function onTabChange(){
   
3.   $('#refreshBox').css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')//切换时默认滚动到顶部，否则会出现多个tab同时滚动导致其他列表出现问题
   
4. mui('#refreshContainer').pullRefresh().refresh(true);//重置上拉加载组件
   
5. }
   
6. 
   
7. //多个tab共用一个下拉刷新组件
   
8.   mui.init({
   
9.     pullRefresh: {
   
10.       container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    
11.       down: {
    
12.         callback: function () {
    
13.      //列表刷新完成后，需要及时关闭对应的动画，否则会出现无效的问题
    
14.       mui("#refreshContainer").pullRefresh().endPulldownToRefresh();//结束动画
    
15.   },
    
16.       },
    
17.       up: {
    
18.         callback:   function () {
    
19.   ...
    
20.       mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);//上拉加载时false表示还有数据
    
21.   },
    
22.       },
    
23.     },
    
24.   });

复制代码