mui多層tab切換上拉加載的實現

最近做項目用到mui開發移動端，其中有一個需求就是多層嵌套切換下拉刷新,實現不同的tab刷新不同的內容。

下面記錄一下思路與具體的實現方法。

 

思路：

1、可以共用一個滾動下拉外殼  mui-scroll-wrapper

2、當下拉時判斷當前被選中的是哪個tab ，從而渲染那個tab

步驟：

1.首先，引入mui框架的依賴，mui.css和mui.js,模板渲染插件art-template.js

<link rel="stylesheet" href="dist/mui/css/mui.css"> //mui  樣式文件
<script rel="stylesheet" src="dist/mui/js/mui.min.js"></script>//（mui js文件）
<script rel="stylesheet" src="js/zepto.min.js"></script>//js框架庫（適用於移動端）
<script rel="stylesheet" src="js/art-template.js"></script>//模板渲染插件

2.將mui-scroll-wrapper放到最外層，包裹住所有的切換內容，具體html結構如下

<div class="out mui-content mui-scroll-wrapper" id="refreshContainer" >
    <div class='mui-scroll'>
        <section class="notice">
            <ul class="tab">
                <li class="active">
                    <a href="javascript:;">tab1</a>
                </li>
                <li>
                    <a href="javascript:;">tab2</a>
                </li>
                <li>
                    <a href="javascript:;">tab3</a>
                </li>
            </ul>
            <ul class="tab_list pinglun">
                <li class="on" data-temp= '1'>
                    <p>
                        <a href="javascript:;" class="active">第二層tab1</a>
                        <a href="javascript:;">第二層tab2</a>
                        <a href="javascript:;">第二層tab3</a>
                    </p>
                    <div class="table_list">
                        <div class="on">
                            具體內層div1
                        </div>
                        <div>
                            具體內層div2
                        </div>
                        <div>
                            具體內層div3
                        </div>
                    </div>
                </li>
                <li>
                    <p>
                        <a href="javascript:;" class="active">第二層tab1</a>
                        <a href="javascript:;">第二層tab2</a>
                        <a href="javascript:;">第二層tab3</a>
                    </p>
                    <div class="table_list">
                        <div class="on">
                            具體內層div1
                        </div>
                        <div>
                            具體內層div2
                        </div>
                        <div>
                            具體內層div3
                        </div>
                    </div>
                </li>
                <li >
                    <p>
                        <a href="javascript:;" class="active">第二層tab1</a>
                        <a href="javascript:;">第二層tab2</a>
                        <a href="javascript:;">第二層tab3</a>
                    </p>
                    <div class="table_list">
                        <div class="on">
                            具體內層div1
                        </div>
                        <div>
                            具體內層div2
                        </div>
                        <div>
                            具體內層div3
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</div>

3，到這里結構已經實現，tab切換網上一搜到處是demo,這里就不啰嗦了。下面初始化下拉刷新和模板渲染

　　模板渲染：考慮到不同的tab用到的模板不同，所以給每個tab一個data-temp屬性用來區別判斷當前需要哪個渲染模板：

<script id="type1" type="text/html">
    {{each list as item}}
    <span>我是刷新的模擬新數據</span>
    {{/each}}
</script>
<script id="test" type="text/html">
    {{each list as item}}
    <span>我是第二種模板渲染</span>
    {{/each}}
</script>

　　mui上拉加載初始化：

var data = {
    list: [{
        'id': '18',
        'imagesUrl': 'images/111.png',
        'name': '新數據1',
        'jifen': '233',
        'url': '1.html'
    },
        {

'id': '18',
        'imagesUrl': 'images/111.png',
        'name': '新數據2',
        'jifen': '233',
        'url': '1.html'

        }
};

mui.init({
        pullRefresh : {
            container:"#refreshContainer",//上拉加載容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
            up : {
                height:50,//可選.默認50.觸發上拉加載拖動距離
                auto:false,//可選,默認false.自動上拉加載一次
                contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
                contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
                callback :function(){
                    var html =''
                    //判斷不同的下拉刷新，選擇不同的渲染模板 同樣，data數據也要經過判斷然后向后台發送請求
                    if($('.pinglun li.on').attr('data-temp')=='1'){
                        html = template('type1', data);//data為模擬的json對象，小伙伴可以自己模擬一下，或者直接有接口用ajax獲取到數據，那就是真正的動態刷新了
                    }else{
                        html = template('test', data);
                    }
                    var that = $(this);
                    var content = $('.pinglun li.on div.on');//找到當前切換狀態的div。然后在這里面動態渲染數據
                    html= content.html()+html;
                    content.html(html);
                    setTimeout(function(){
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                    },1000)
                } //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
            }
        }
    });