##底部 ###1、底部樣式一  ``` <style> .aui-nav {background-color: none;} .aui-nav .aui-bar-tab {background-color: #fff;border-top:1px solid #eee;} .aui-nav .aui-bar-tab .aui-iconfont{font-size: 26px !important;} .aui-nav .aui-bar-tab .aui-iconfont, .aui-nav .aui-bar-tab p {color: #a2a2a2;} </style> <footer class="aui-nav" id="aui-footer"> <ul class="aui-bar-tab"> <li class="active-info" id="helper_list" tapmode onclick="randomSwitchBtn(0,'helper_list')"> <span class="aui-iconfont aui-icon-crownfill"></span> <p>幫主</p> </li> <li id="ask_list" tapmode onclick="randomSwitchBtn(1,'ask_list')"> <span class="aui-iconfont aui-icon-commandfill"></span> <p>問答</p> </li> <li id="my" tapmode onclick="randomSwitchBtn(2,'my')"> <span class="aui-iconfont aui-icon-peoplefill"></span> <p>我的</p> </li> </ul> </footer> <script> function openGroup(){ var header = $api.byId('aui-header'); var headerPos = $api.offset(header); var body_h = $api.offset($api.dom('body')).h; var footer_h = $api.offset($api.byId('aui-footer')).h; api.openFrameGroup({ name: 'indexGroup', scrollEnabled: true, rect:{x:0, y:headerPos.h, w:'auto', h:body_h - headerPos.h - footer_h}, index: 0, frames: [{ name:'helper_list', url:'helper_list.html', vScrollBarEnabled:false, hScrollBarEnabled:false, bounces:false },{ name:'ask_list', url:'ask_list.html', vScrollBarEnabled:false, hScrollBarEnabled:false, bounces:false },{ name:'my', url:'my.html', vScrollBarEnabled:false, hScrollBarEnabled:false, bounces:false }] }, function (ret, err) { $api.removeCls($api.dom('#aui-footer li.active-info'),'active-info'); $api.addCls($api.byId(''+ret.name+''),'active-info'); }); } // 隨意切換按鈕 function randomSwitchBtn(index,name) { $api.removeCls($api.dom('#aui-footer li.active-info'),'active-info'); $api.addCls($api.byId(''+name+''),'active-info'); api.setFrameGroupIndex({ name: 'indexGroup', index: index }); } </script> ```