Tab切换
咱们还是继续接着上篇文章去写，今天要写的是下面Table的切换，在这里面，为了让大家看起来更清晰，我单独写一个demo去讲Table切换，让大家看下今天学完之后能做出来的效果：
tab切换
开始我们第一个小demo，先来分析一下Table切换，应用中的五个页面其实是5个div组成，而非是5个html文件，大家都只知道，如果用5个html文件来进行切换的话，它会存在很大的卡顿，闪屏，甚至白屏，为了让它看起来更像是一个原生的App这里面用的是div进行切换。
原理：创建5个div，给在第一个页面显示的div改成display:block，其余div添加一个隐藏的属性display:none，,当触发Table的点击事件的时候，点击Table的下标与div的下标进行匹配，如果相同让其div的属性改为display:block进行显示。听起来比较复杂，那我们来进行拆解，一步一步来。
第一步：创建5个div
在MUI中除了固定栏，其余的标签都写在<div class="mui-content">中
<div class="mui-content">
<!--第一个页面-->
<div class="alldiv div1">我是第一个页面</div>
<!--第二个页面-->
<div class="alldiv div2">我是第二个页面</div>
<!--第三个页面-->
<div class="alldiv div3">我是第三个页面</div>
<!--第四个页面-->
<div class="alldiv div4">我是第四个页面</div>
<!--第五个页面-->
<div class="alldiv div4">我是第五个页面</div>
</div>
第二步：给div添加样式
给第一个要显示的div添加display: block;其它div添加display: none；为了方便大家观看，每一个div都给一个颜色，
.alldiv{
height: 200px;
width: 100%;
display: none;
font-size: 50px;
line-height: 200px;
}
.div1{
display: block;
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: salmon;
}
.div4{
background-color: darkturquoise;
}
.div5{
background-color: bisque;
}
第三步：创建TableBar
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-help"></span>
<span class="mui-tab-label">帮助</span>
</a>
</nav>
第四步：监听Table点击事件
在点击tabBar的时候，要对所有div进行隐藏，并判断点击tabBar的下标跟div的下标是否匹配，如果匹配就修改样式进行显示
JQ写法：
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui(".mui-bar-tab").on('tap','.mui-tab-item',function(){
//点击tabBar的时候找到所有的div进行隐藏
$('.alldiv').css({"display":"none"});
//匹配div的下标跟点击的下表相同就进行显示
$('.alldiv').eq($(this).index()).css({"display":"block"});
})
})
</script>
【注意】使用原生写法的时候需要手动给所有div添加下标
<a class="mui-tab-item mui-active" id="index1">//添加下标
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
原生JS写法：
var arrDiv = document.getElementsByClassName("container-div");
var index = this.getAttribute('index');
for(var i = 0; i<arrDiv.length;i++){
arrDiv[i].style.display = "none";
arrDiv[i].index = i;
if(arrDiv[i].index == index){
arrDiv[i].style.display = "block";
}
}
到这里我们就写完了Table切换，效果如下：
Table切换
接下来要做的就是把Tab切换的技术运行到咱们网易新闻项目里面，我们接着上篇文章中的网易新闻继续来写
第一步：首先在content里面把咱们之前写的代码进行剪切
也就是剪切以下内容：
<div>
<div class="tab_title">
<a>头条</a>
<a >热点</a>
<a >娱乐</a>
<a >财经</a>
<a >体育</a>
<a ><img src="imgs/comment_arrow_down@2x.png"/></a>
</div>
</div>
<div class="mui-slider ">
<div class="mui-slider-group" id="slider-img">
<!--图片、标题-->
</div>
<!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
<!--图片滚动标记-->
</div>
</div>
<ul class="mui-table-view" id="tableView-List"></ul>
第二步：创建5个div
创建5个div当做5个页面
<div class="mui-content">
<!--第一个页面-->
<div class="container-div" style="display: block;"></div>
<!--第二个页面-->
<div class="container-div"></div>
<!--第三个页面-->
<div class="container-div" ></div>
<!--第四个页面-->
<div class="container-div"></div>
<!--第五个页面-->
<div class="container-div"></div>
</div>
第三步：把剪切的内容放到第一个页面中
<div class="mui-content">
<!--第一个页面-->
<div class="container-div" style="display: block;">
<div>
<div class="tab_title">
<a>头条</a>
<a >热点</a>
<a >娱乐</a>
<a >财经</a>
<a >体育</a>
<a ><img src="imgs/comment_arrow_down@2x.png"/></a>
</div>
</div>
<div class="mui-slider ">
<div class="mui-slider-group" id="slider-img">
<!--图片、标题-->
</div>
<!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
<!--图片滚动标记-->
</div>
</div>
<ul class="mui-table-view" id="tableView-List"></ul>
</div>
<!--第二个页面-->
<div class="container-div"></div>
<!--第三个页面-->
<div class="container-div" ></div>
<!--第四个页面-->
<div class="container-div"></div>
<!--第五个页面-->
<div class="container-div"></div>
</div>
按照上面的tab切换进行样式改变和事件绑定
//Tab切换,找到容器组件
mui(".mui-bar-tab").on('tap','.mui-tab-item',function(e){
$('.container-div').css({"display":"none"});
$('.container-div').eq($(this).index()).css({"display":"block"});
})
第四步：进行其它页面的完善
会了tab切换，也会之前网络请求和解析，其它的页面都不是什么问题，接下来对第三个页面‘视听’进行请求与解析
HTML代码：
<!--第三个页面-->
<div class="container-div" id="container-div-index3">
</div>
网络请求
//视听请求
mui.ajax('http://c.3g.163.com/nc/video/home/10-10.html',{
dataType:'josn',
type:'get',
timeout:10000,
success:function(data){
var jsonData = $.parseJSON(data);
viedioData(jsonData);
},
error:function(){
alert("网络无连接");
}
})
网络解析并赋值
//用来处理视听页面数据
function viedioData(data){
var finalist = null;
var arr = data.videoList;
for(var i = 0;i<arr.length;i++){
finalist = '<div class="viedio-container"><strong class="viedio_title">'+data.videoList[i].title+'</strong><span class="viedio_subtitle">'+data.videoList[i].description+'</span><video class="play-video"controls poster='+arr[i].cover+' ><source src='+data.videoList[i].mp4_url+'></source><source src="myvideo.ogv" type="video/ogg"></source><source src="myvideo.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></object>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video></div>';
$('#container-div-index3').append(finalist);
}
}
运行效果
视听页面
未完待续。。。
下集预告，下拉刷新，上拉加载，等。。。
今天先写在这里吧，在写文章的时候我发现一个问题，就是在写整个项目文章的时候，知识点都在做项目中才体现出来了，东西太多串起来很麻烦，对于读者学的时候还得从头去看才能把整个知识点串起来，那我在接下来的文章中会对单独的知识点罗列出来进行讲解，然后再串起来结合项目进行展示。最后感谢那些支持我的朋友们，一起加油。
