使用HTML5开发App（五）

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添加样式

给第一个要显示的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

    
        
        首页
    
    
        
        电话
    
    
        
        邮件
    
    
        
        设置
    
     
        
        帮助
    

第四步：监听Table点击事件

在点击tabBar的时候，要对所有div进行隐藏，并判断点击tabBar的下标跟div的下标是否匹配，如果匹配就修改样式进行显示
JQ写法：

【注意】使用原生写法的时候需要手动给所有div添加下标

 //添加下标
         
         首页
     

原生JS写法：

 var arrDiv = document.getElementsByClassName("container-div");
   var index = this.getAttribute('index');
   for(var i = 0; i

到这里我们就写完了Table切换，效果如下：

Table切换

接下来要做的就是把Tab切换的技术运行到咱们网易新闻项目里面，我们接着上篇文章中的网易新闻继续来写

第一步：首先在content里面把咱们之前写的代码进行剪切

也就是剪切以下内容：

   

    

     头条
     热点
     娱乐
     财经
     体育
     
    
   
   
   

             

               
             
             
             

               
             
         
  
   

第二步：创建5个div

创建5个div当做5个页面

第三步：把剪切的内容放到第一个页面中

        


    

     头条
     热点
     娱乐
     财经
     体育
     
    
   
   
   

             

               
             
             
             

               
             
         
  
   



        
        


        
        


        
        


        
        
   

按照上面的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代码：

网络请求

//视听请求
  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'+data.videoList[i].description+'

'; $('#container-div-index3').append(finalist); } }

运行效果

视听页面

未完待续。。。
下集预告，下拉刷新，上拉加载，等。。。

今天先写在这里吧，在写文章的时候我发现一个问题，就是在写整个项目文章的时候，知识点都在做项目中才体现出来了，东西太多串起来很麻烦，对于读者学的时候还得从头去看才能把整个知识点串起来，那我在接下来的文章中会对单独的知识点罗列出来进行讲解，然后再串起来结合项目进行展示。最后感谢那些支持我的朋友们，一起加油。