##底部
###1、底部样式一
![](https://box.kancloud.cn/2016-08-25_57be8e3103553.png)
```
<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>
```
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包(账户)
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd