mui 切换.html,MUI多层TAB切换上拉加载的实现

最近做项目用到mui开发移动端，其中有一个需求就是多层嵌套切换下拉刷新,实现不同的tab刷新不同的内容。

下面记录一下思路与具体的实现方法。

MUI多层TAB切换上拉加载的实现

思路：

1、可以共用一个滚动下拉外壳 mui-scroll-wrapper

2、当下拉时判断当前被选中的是哪个tab ，从而渲染那个tab

步骤：

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

//mui 样式文件

//(mui js文件)

//js框架库(适用于移动端)

//模板渲染插件

2.将mui-scroll-wrapper放到最外层，包裹住所有的切换内容，具体html结构如下

• tab1

• tab2

• tab3

• 第二层tab1

  第二层tab2

  第二层tab3

  具体内层div1

  具体内层div2

  具体内层div3

• 第二层tab1

  第二层tab2

  第二层tab3

  具体内层div1

  具体内层div2

  具体内层div3

• 第二层tab1

  第二层tab2

  第二层tab3

  具体内层div1

  具体内层div2

  具体内层div3

3，到这里结构已经实现，tab切换网上一搜到处是demo,这里就不啰嗦了。下面初始化下拉刷新和模板渲染

模板渲染：考虑到不同的tab用到的模板不同，所以给每个tab一个data-temp属性用来区别判断当前需要哪个渲染模板：

{{each list as item}}

我是刷新的模拟新数据

{{/each}}

{{each list as item}}

我是第二种模板渲染

{{/each}}

4、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从服务器获取新数据；

}

}

})

举报/反馈