最近做项目用到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从服务器获取新数据; } } });