Tab切換
咱們還是繼續(xù)接著上篇文章去寫(xiě)，今天要寫(xiě)的是下面Table的切換妒穴，在這里面览祖，為了讓大家看起來(lái)更清晰，我單獨(dú)寫(xiě)一個(gè)demo去講Table切換扭仁，讓大家看下今天學(xué)完之后能做出來(lái)的效果：
開(kāi)始我們第一個(gè)小demo垮衷，先來(lái)分析一下Table切換，應(yīng)用中的五個(gè)頁(yè)面其實(shí)是5個(gè)div組成乖坠，而非是5個(gè)html文件搀突，大家都只知道，如果用5個(gè)html文件來(lái)進(jìn)行切換的話熊泵，它會(huì)存在很大的卡頓仰迁，閃屏，甚至白屏顽分，為了讓它看起來(lái)更像是一個(gè)原生的App這里面用的是div進(jìn)行切換徐许。
原理：創(chuàng)建5個(gè)div，給在第一個(gè)頁(yè)面顯示的div改成display:block卒蘸，其余div添加一個(gè)隱藏的屬性display:none雌隅，,當(dāng)觸發(fā)Table的點(diǎn)擊事件的時(shí)候，點(diǎn)擊Table的下標(biāo)與div的下標(biāo)進(jìn)行匹配缸沃，如果相同讓其div的屬性改為display:block進(jìn)行顯示恰起。聽(tīng)起來(lái)比較復(fù)雜，那我們來(lái)進(jìn)行拆解趾牧，一步一步來(lái)检盼。
第一步：創(chuàng)建5個(gè)div
在MUI中除了固定欄，其余的標(biāo)簽都寫(xiě)在<div class="mui-content">中
<div class="mui-content">
<!--第一個(gè)頁(yè)面-->
<div class="alldiv div1">我是第一個(gè)頁(yè)面</div>
<!--第二個(gè)頁(yè)面-->
<div class="alldiv div2">我是第二個(gè)頁(yè)面</div>
<!--第三個(gè)頁(yè)面-->
<div class="alldiv div3">我是第三個(gè)頁(yè)面</div>
<!--第四個(gè)頁(yè)面-->
<div class="alldiv div4">我是第四個(gè)頁(yè)面</div>
<!--第五個(gè)頁(yè)面-->
<div class="alldiv div4">我是第五個(gè)頁(yè)面</div>
</div>
第二步：給div添加樣式
給第一個(gè)要顯示的div添加display: block;其它div添加display: none武氓；為了方便大家觀看梯皿，每一個(gè)div都給一個(gè)顏色仇箱，
.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">首頁(yè)</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)聽(tīng)Table點(diǎn)擊事件
在點(diǎn)擊tabBar的時(shí)候，要對(duì)所有div進(jìn)行隱藏东羹，并判斷點(diǎn)擊tabBar的下標(biāo)跟div的下標(biāo)是否匹配剂桥，如果匹配就修改樣式進(jìn)行顯示
JQ寫(xiě)法：
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui(".mui-bar-tab").on('tap','.mui-tab-item',function(){
//點(diǎn)擊tabBar的時(shí)候找到所有的div進(jìn)行隱藏
$('.alldiv').css({"display":"none"});
//匹配div的下標(biāo)跟點(diǎn)擊的下表相同就進(jìn)行顯示
$('.alldiv').eq($(this).index()).css({"display":"block"});
})
})
</script>
【注意】使用原生寫(xiě)法的時(shí)候需要手動(dòng)給所有div添加下標(biāo)
<a class="mui-tab-item mui-active" id="index1">//添加下標(biāo)
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁(yè)</span>
</a>
原生JS寫(xiě)法：
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";
}
}
到這里我們就寫(xiě)完了Table切換，效果如下：
接下來(lái)要做的就是把Tab切換的技術(shù)運(yùn)行到咱們網(wǎng)易新聞項(xiàng)目里面属提，我們接著上篇文章中的網(wǎng)易新聞繼續(xù)來(lái)寫(xiě)
第一步：首先在content里面把咱們之前寫(xiě)的代碼進(jìn)行剪切
也就是剪切以下內(nèi)容：
<div>
<div class="tab_title">
<a>頭條</a>
<a >熱點(diǎn)</a>
<a >娛樂(lè)</a>
<a >財(cái)經(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">
<!--圖片权逗、標(biāo)題-->
</div>
<!--注意這里面是圖片滾動(dòng)的標(biāo)記，div的數(shù)量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
<!--圖片滾動(dòng)標(biāo)記-->
</div>
</div>
<ul class="mui-table-view" id="tableView-List"></ul>
第二步：創(chuàng)建5個(gè)div
創(chuàng)建5個(gè)div當(dāng)做5個(gè)頁(yè)面
<div class="mui-content">
<!--第一個(gè)頁(yè)面-->
<div class="container-div" style="display: block;"></div>
<!--第二個(gè)頁(yè)面-->
<div class="container-div"></div>
<!--第三個(gè)頁(yè)面-->
<div class="container-div" ></div>
<!--第四個(gè)頁(yè)面-->
<div class="container-div"></div>
<!--第五個(gè)頁(yè)面-->
<div class="container-div"></div>
</div>
第三步：把剪切的內(nèi)容放到第一個(gè)頁(yè)面中
<div class="mui-content">
<!--第一個(gè)頁(yè)面-->
<div class="container-div" style="display: block;">
<div>
<div class="tab_title">
<a>頭條</a>
<a >熱點(diǎn)</a>
<a >娛樂(lè)</a>
<a >財(cái)經(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">
<!--圖片冤议、標(biāo)題-->
</div>
<!--注意這里面是圖片滾動(dòng)的標(biāo)記斟薇，div的數(shù)量要和上面的匹配-->
<div class="mui-slider-indicator" id="slider-indicator">
<!--圖片滾動(dòng)標(biāo)記-->
</div>
</div>
<ul class="mui-table-view" id="tableView-List"></ul>
</div>
<!--第二個(gè)頁(yè)面-->
<div class="container-div"></div>
<!--第三個(gè)頁(yè)面-->
<div class="container-div" ></div>
<!--第四個(gè)頁(yè)面-->
<div class="container-div"></div>
<!--第五個(gè)頁(yè)面-->
<div class="container-div"></div>
</div>
按照上面的tab切換進(jìn)行樣式改變和事件綁定
//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"});
})
第四步：進(jìn)行其它頁(yè)面的完善
會(huì)了tab切換，也會(huì)之前網(wǎng)絡(luò)請(qǐng)求和解析恕酸，其它的頁(yè)面都不是什么問(wèn)題堪滨，接下來(lái)對(duì)第三個(gè)頁(yè)面‘視聽(tīng)’進(jìn)行請(qǐng)求與解析
HTML代碼：
<!--第三個(gè)頁(yè)面-->
<div class="container-div" id="container-div-index3">
</div>
網(wǎng)絡(luò)請(qǐng)求
//視聽(tīng)請(qǐng)求
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ú)連接");
}
})
網(wǎng)絡(luò)解析并賦值
//用來(lái)處理視聽(tīng)頁(yè)面數(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>當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="myvideo.webm">下載視頻</a></video></div>';
$('#container-div-index3').append(finalist);
}
}
運(yùn)行效果
未完待續(xù)蕊温。袱箱。。
下集預(yù)告义矛，下拉刷新发笔，上拉加載，等凉翻。了讨。。
今天先寫(xiě)在這里吧制轰，在寫(xiě)文章的時(shí)候我發(fā)現(xiàn)一個(gè)問(wèn)題前计，就是在寫(xiě)整個(gè)項(xiàng)目文章的時(shí)候，知識(shí)點(diǎn)都在做項(xiàng)目中才體現(xiàn)出來(lái)了艇挨，東西太多串起來(lái)很麻煩残炮，對(duì)于讀者學(xué)的時(shí)候還得從頭去看才能把整個(gè)知識(shí)點(diǎn)串起來(lái)，那我在接下來(lái)的文章中會(huì)對(duì)單獨(dú)的知識(shí)點(diǎn)羅列出來(lái)進(jìn)行講解缩滨，然后再串起來(lái)結(jié)合項(xiàng)目進(jìn)行展示势就。最后感謝那些支持我的朋友們，一起加油脉漏。
