首页 > 代码库 > H5移动开发底部导航-博客园老牛大讲堂
H5移动开发底部导航-博客园老牛大讲堂
一、H5分类
网页开发，移动开发，移动混合开发，
二、所用知识点：
APICloud：APICloud是为了开发APP的，所以如果用H5开发的移动端，需要发送短信，获取照相机等就要用APICloud的了。
aui框架：aui框架就是专门开发移动端的框架。
三、怎样用H5开发移动端？
我建议如果用H5开发移动端，全都用H5网页开发。如果涉及到发送短信和照相等操作，再用APICoud开发。
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />//移动端需要加载 7 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">//移动端需要加载 8 9 <link rel="stylesheet" type="text/css" href="../../css/aui.css" />//aui框架。 10 </head> 11 12 <body> 13 <div id="tbodyCenter">//为了加载用户的界面 14 15 </div> 16 17 <footer class="aui-nav" id="footer" style="border-top: 1px solid #dbdbdb;z-index:9"> 18 <ul class="aui-bar-tab" id="parent"> 19 <li > 20 <img src="../../image/main_2.png" style="width: 25px;padding-top: 5px;" /> 21 <p class="aui-text-danger"> 22 首页 23 </p> 24 </li> 25 <li> 26 <img src="../../image/mall.png" style="width: 25px;padding-top: 5px;" /> 27 <p> 28 发现 29 </p> 30 </li> 31 <li> 32 <img src="../../image/find.png" style="width: 25px;padding-top: 5px;" /> 33 <p> 34 收藏 35 </p> 36 </li> 37 <li > 38 <img src="../../image/user.png" style="width: 25px;padding-top: 5px;" /> 39 <p> 40 我的 41 </p> 42 </li> 43 </ul> 44 </footer> 45 </body> 46 <script type="text/javascript" src="../../script/api.js"></script> 47 <script type="text/javascript" src="../../js/jquery-3.0.0.min.js" ></script> 48 <script type="text/javascript"> 49 50 51 var listfont=document.getElementById("parent").getElementsByTagName("p");//获取p标签列表 52 var listimg=document.getElementById("parent").getElementsByTagName("img");//获取img列表 53 var listli=document.getElementById("parent").children;//获取li列表 54
55 for(var i=0;i<listli.length;i++) 56 { 57 listli[i].index=i; 58 listli[i].onclick=function(i)//为每一个li增加点击事件。 59 { 60 initimg();//初始化img 61 initfont(listli.length);//初始化font 62 switchImg(this.index);//改变图片 63 listfont[this.index].className="aui-text-danger";//改变font（字体） 64 panduan(this.index);//根据下标，加载相应的界面 65 }; 66 }; 67 68 function initimg(){//初始的图片 69 listimg[0].setAttribute("src","../../image/main.png"); 70 listimg[1].setAttribute("src","../../image/mall.png"); 71 listimg[2].setAttribute("src","../../image/find.png"); 72 listimg[3].setAttribute("src","../../image/user.png"); 73 } 74
//初始化字体 75 function initfont(index) { 76 for(var i=0;i<index;i++) 77 { 78 listfont[i].className=""; 79 } 80 } 81
//当点击的时候显示的图片。 82 function switchImg(index){ 83 switch(index){ 84 case 0: 85 listimg[0].setAttribute("src","../../image/main_2.png"); 86 break; 87 case 1: 88 listimg[1].setAttribute("src","../../image/mall_2.png"); 89 break; 90 case 2: 91 listimg[2].setAttribute("src","../../image/find_2.png"); 92 break; 93 case 3: 94 listimg[3].setAttribute("src","../../image/user_2.png"); 95 break; 96 } 97 } 98 function panduan(index){ 99 switch(index){100 case 0:101 $("#tbodyCenter").load("../first/first.html");//第一个页面102 break;103 case 1:104 105 break;106 case 2:107 108 break;109 case 3:110 $("#tbodyCenter").load("../fourth/my.html");第二个页面111 break;112 }113 }114 115 </script>116 117 </html>
四、效果截图
四、其中红色的是红色的图片，没有红色的也是图片。
H5移动开发底部导航-博客园老牛大讲堂
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。