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

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

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

 

思路：

一、能夠共用一個滾動下拉外殼  mui-scroll-wrapper

二、當下拉時判斷當前被選中的是哪一個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從服務器獲取新數據；
 } } });