Tab切換
咱們還是繼續(xù)接著上篇文章去寫，今天要寫的是下面Table的切換，在這里面，為了讓大家看起來更清晰，我單獨寫一個demo去講Table切換，讓大家看下今天學(xué)完之后能做出來的效果：
tab切換
開始我們第一個小demo，先來分析一下Table切換，應(yīng)用中的五個頁面其實是5個div組成，而非是5個html文件，大家都只知道，如果用5個html文件來進行切換的話，它會存在很大的卡頓，閃屏，甚至白屏，為了讓它看起來更像是一個原生的App這里面用的是div進行切換。
原理：創(chuàng)建5個div，給在第一個頁面顯示的div改成display:block，其余div添加一個隱藏的屬性display:none，,當觸發(fā)Table的點擊事件的時候，點擊Table的下標與div的下標進行匹配，如果相同讓其div的屬性改為display:block進行顯示。聽起來比較復(fù)雜，那我們來進行拆解，一步一步來。
第一步：創(chuàng)建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;
}
第三步：創(chuàng)建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">設(shè)置</span>
</a>
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-help"></span>
<span class="mui-tab-label">幫助</span>
</a>
</nav>
第四步：監(jiān)聽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切換的技術(shù)運行到咱們網(wǎng)易新聞項目里面，我們接著上篇文章中的網(wǎng)易新聞繼續(xù)來寫
第一步：首先在content里面把咱們之前寫的代碼進行剪切
也就是剪切以下內(nèi)容：
<div>
<div class="tab_title">
<a>頭條</a>
<a >熱點</a>
<a >娛樂</a>
<a >財經(jīng)</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的數(shù)量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
<!--圖片滾動標記-->
</div>
</div>
<ul class="mui-table-view" id="tableView-List"></ul>
第二步：創(chuàng)建5個div
創(chuàng)建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>
第三步：把剪切的內(nèi)容放到第一個頁面中
<div class="mui-content">
<!--第一個頁面-->
<div class="container-div" style="display: block;">
<div>
<div class="tab_title">
<a>頭條</a>
<a >熱點</a>
<a >娛樂</a>
<a >財經(jīng)</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的數(shù)量要和上面的匹配-->
<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切換，也會之前網(wǎng)絡(luò)請求和解析，其它的頁面都不是什么問題，接下來對第三個頁面‘視聽’進行請求與解析
HTML代碼：
<!--第三個頁面-->
<div class="container-div" id="container-div-index3">
</div>
網(wǎng)絡(luò)請求
//視聽請求
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("網(wǎng)絡(luò)無連接");
}
})
網(wǎng)絡(luò)解析并賦值
//用來處理視聽頁面數(shù)據(jù)
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);
}
}
運行效果
視聽頁面
未完待續(xù)。。。
下集預(yù)告，下拉刷新，上拉加載，等。。。
今天先寫在這里吧，在寫文章的時候我發(fā)現(xiàn)一個問題，就是在寫整個項目文章的時候，知識點都在做項目中才體現(xiàn)出來了，東西太多串起來很麻煩，對于讀者學(xué)的時候還得從頭去看才能把整個知識點串起來，那我在接下來的文章中會對單獨的知識點羅列出來進行講解，然后再串起來結(jié)合項目進行展示。最后感謝那些支持我的朋友們，一起加油。
