### tabBarMenu底部导航 百度云盘：官方案例 http://pan.baidu.com/s/1o8tZvjc 需要引入第三方模块  <br/> <br/> <br/> <br/> <br/> <br/> **小编的项目**  >由于项目需要，小编中间的按钮没有使用tabBarMenu的弹出菜单功能，而是跳转了一个页面、**注：**如果点击中间的按钮是跳转页面的话，会有一个小bug---导致中间的按钮不能点击 需要点击其他按钮才可再次点击中间的按钮 > 解决方法：从跳转页面回来之后，模拟一下导航点击动作 ~~~ //模拟点击导航按钮 function simulate() { var tabBarMenu = api.require('tabBarMenu'); tabBarMenu.setBarSelect({ index: 0 }); } ~~~ **案例代码** ~~~ function tabBarMenu() { var tabBarMenu = api.require("tabBarMenu"); var theme = "simple"; // 可以支持自定义主题,示例内置两种风格主题:simple,night. tabBarMenu.open({ // 打开标签菜单. defaultBarSelect: 0, // 默认选中的标签栏按钮 autoLayout: true, // 是否自动调整当前页面网页视图的位置. barConfig: { // 标签栏通用配置信息. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_bg1.png" // 背景图片路径. }, barItemConfig: { // 标签栏按钮的通用配置信息. titleColor: "#848284", // 文本颜色, 格式为#fff、#ffffff、rgba(r,g,b,a)等 titleSelectColor: "#848284", // 选中状态时,按钮文本的颜色, 默认与titleColor相同. fontSize: 11.0, // 文字大小. textMarginTop: 41.0, // 文本距离按钮上边界的距离. primaryItem: 5 // 激活弹出菜单的标签栏按钮的下标. }, barItems: [ // 标签栏各按钮的信息. { title: "聚聚", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/disc.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/disc_click.png" // 被点击时的背景图片路径. }, { title: "消息", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/chect.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/chect_click.png" // 被点击时的背景图片路径. }, { title: "", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png" // 被点击时的背景图片路径. }, { title: "聚友", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/meet.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/meet_click.png" // 被点击时的背景图片路径. }, { title: "我的", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/me.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/me_click.png" // 被点击后的背景图片路径. } ], menuConfig: { // 菜单栏通用配置. coverBgColor: "#fff", // 遮罩的背景色, 格式为#fff、#ffffff、rgba(r,g,b,a)等. coverAlpha: 1, // 遮罩的透明度, 取值范围0.0~1.0. rows: 3 // 单页菜单每行显示的按钮数. }, menuItemConfig: { // 菜单栏各按钮通用配置信息. titleColor: "#000", // 文本颜色, 格式为#fff、#ffffff、rgba(r,g,b,a)等. titleSelectColor: "#000", // 选中状态时,按钮文本的颜色, 默认与titleColor相同. fontSize: 11.0, // 字体大小. textMarginTop: 90.0 // 文本距离按钮上边界的距离. }, menuItems: [ // 菜单栏各按钮的信息. { title: "写个心情", //标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk.png", // 背景图片. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk_click.png" // 被点击时的背景图片. }, { title: "每日签到", //标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration.png", // 背景图片. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration_click.png" // 被点击时的背景图片. }, { title: "主持人", //标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera.png", // 背景图片. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera_click.png" // 被点击时的背景图片. } ] }, function(ret, err) { // 点击标签栏或菜单栏按钮时的回调方法.点击激活菜单栏的标签栏按钮时不会触发此方法. if(ret) { // alert(ret.item.type+'--'+ret.item.index); // var item = ret.index; // if("menu" == item.type) { // tabBarMenu.hideMenu(); // 隐藏弹出菜单. // } // api.alert({ // title: "提示", // msg: "您点击了 " + item.type + " 上,第 " + item.index + " 个按钮!", // buttons: ["确定"] // }); switch(ret.item.index) { case 0: api.setFrameGroupIndex({ /*聚聚*/ name: 'main_part', index: 0, scroll: true }); break; case 1: api.setFrameGroupIndex({ /*消息*/ name: 'main_part', index: 1, scroll: true }); break; case 2: api.openWin({ /*中间按钮*/ name: 'weibo_publish_word', url: './weibo/weibo_publish_word.html', }); break; case 3: api.setFrameGroupIndex({ /*聚友*/ name: 'main_part', index: 2, scroll: true }); break; case 4: api.setFrameGroupIndex({ /*我的*/ name: 'main_part', index: 3, scroll: true }); break; } } }); } //创建FramGroup组 function OnFrame() { var header = $api.byId('search'); $api.fixIos7Bar(header); $api.fixStatusBar(header); var headerPos = $api.offset(header); var frameheight = api.winHeight - headerPos.h; api.openFrameGroup({ name: 'main_part', scrollEnabled: false, rect: { x: 0, y: headerPos.h, w: 'auto', h: frameheight - 65 }, index: 0, frames: [{ name: 'home', url: './home/index.html', bounces: false }, { name: 'information', url: './information/info_list.html', bounces: false }, { name: 'weibo', url: './weibo/weibo_friends_list_frm.html', bounces: false }, { name: 'mine', url: './mine/my.html', bounces: false }] }, function(ret, err) { var name = ret.name; var index = ret.index; if(index == 0) { $api.html($api.byId('search'), '<span style="color:#bbbbbb;margin-left:10px;"><i class="aui-iconfont aui-icon-location" style="font-size:0.9rem;"></i><e id="cityname">太原</e></span><div class="aui-searchbar-input aui-border-radius"><i class="iconfont icon-search" style="color:#00c3ff;"></i><form action="javascript:search();"><input type="search" placeholder="搜文章/搜微博/搜人" id="search-input" style="color:#bbbbbb;text-indent:6px;"></form>'); } if(index == 2) { $api.html($api.byId('search'), '<header class="aui-bar aui-bar-nav aui-bar-light" id="aui-header"><div class="aui-title">聚友</div><i class="iconfont icon-tianjiahaoyou aui-pull-right" tapmode onclick="addFriends();"></i><i class="iconfont icon-search aui-pull-right" tapmode onclick="doSearch();"></i>'); } }) } ~~~