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从服务器获取新数据；
            }
        }
    });