<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>//模板渲染插件

<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>

<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>

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