### tabBarMenu底部導(dǎo)航
百度云盤:官方案例
http://pan.baidu.com/s/1o8tZvjc
需要引入第三方模塊

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
**小編的項(xiàng)目**

>由于項(xiàng)目需要,小編中間的按鈕沒(méi)有使用tabBarMenu的彈出菜單功能,而是跳轉(zhuǎn)了一個(gè)頁(yè)面、**注:**如果點(diǎn)擊中間的按鈕是跳轉(zhuǎn)頁(yè)面的話,會(huì)有一個(gè)小bug---導(dǎo)致中間的按鈕不能點(diǎn)擊 需要點(diǎn)擊其他按鈕才可再次點(diǎn)擊中間的按鈕
> 解決方法:從跳轉(zhuǎn)頁(yè)面回來(lái)之后,模擬一下導(dǎo)航點(diǎn)擊動(dòng)作
~~~
//模擬點(diǎn)擊導(dǎo)航按鈕
function simulate() {
var tabBarMenu = api.require('tabBarMenu');
tabBarMenu.setBarSelect({
index: 0
});
}
~~~
**案例代碼**
~~~
function tabBarMenu() {
var tabBarMenu = api.require("tabBarMenu");
var theme = "simple"; // 可以支持自定義主題,示例內(nèi)置兩種風(fēng)格主題:simple,night.
tabBarMenu.open({ // 打開(kāi)標(biāo)簽菜單.
defaultBarSelect: 0, // 默認(rèn)選中的標(biāo)簽欄按鈕
autoLayout: true, // 是否自動(dòng)調(diào)整當(dāng)前頁(yè)面網(wǎng)頁(yè)視圖的位置.
barConfig: { // 標(biāo)簽欄通用配置信息.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_bg1.png" // 背景圖片路徑.
},
barItemConfig: { // 標(biāo)簽欄按鈕的通用配置信息.
titleColor: "#848284", // 文本顏色, 格式為#fff、#ffffff、rgba(r,g,b,a)等
titleSelectColor: "#848284", // 選中狀態(tài)時(shí),按鈕文本的顏色, 默認(rèn)與titleColor相同.
fontSize: 11.0, // 文字大小.
textMarginTop: 41.0, // 文本距離按鈕上邊界的距離.
primaryItem: 5 // 激活彈出菜單的標(biāo)簽欄按鈕的下標(biāo).
},
barItems: [ // 標(biāo)簽欄各按鈕的信息.
{
title: "聚聚", // 標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/disc.png", // 背景圖片路徑.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/disc_click.png" // 被點(diǎn)擊時(shí)的背景圖片路徑.
}, {
title: "消息", // 標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/chect.png", // 背景圖片路徑.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/chect_click.png" // 被點(diǎn)擊時(shí)的背景圖片路徑.
}, {
title: "", // 標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png", // 背景圖片路徑.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png" // 被點(diǎn)擊時(shí)的背景圖片路徑.
}, {
title: "聚友", // 標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/meet.png", // 背景圖片路徑.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/meet_click.png" // 被點(diǎn)擊時(shí)的背景圖片路徑.
}, {
title: "我的", // 標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/me.png", // 背景圖片路徑.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/me_click.png" // 被點(diǎn)擊后的背景圖片路徑.
}
],
menuConfig: { // 菜單欄通用配置.
coverBgColor: "#fff", // 遮罩的背景色, 格式為#fff、#ffffff、rgba(r,g,b,a)等.
coverAlpha: 1, // 遮罩的透明度, 取值范圍0.0~1.0.
rows: 3 // 單頁(yè)菜單每行顯示的按鈕數(shù).
},
menuItemConfig: { // 菜單欄各按鈕通用配置信息.
titleColor: "#000", // 文本顏色, 格式為#fff、#ffffff、rgba(r,g,b,a)等.
titleSelectColor: "#000", // 選中狀態(tài)時(shí),按鈕文本的顏色, 默認(rèn)與titleColor相同.
fontSize: 11.0, // 字體大小.
textMarginTop: 90.0 // 文本距離按鈕上邊界的距離.
},
menuItems: [ // 菜單欄各按鈕的信息.
{
title: "寫個(gè)心情", //標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk.png", // 背景圖片.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk_click.png" // 被點(diǎn)擊時(shí)的背景圖片.
}, {
title: "每日簽到", //標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration.png", // 背景圖片.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration_click.png" // 被點(diǎn)擊時(shí)的背景圖片.
}, {
title: "主持人", //標(biāo)題.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera.png", // 背景圖片.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera_click.png" // 被點(diǎn)擊時(shí)的背景圖片.
}
]
}, function(ret, err) { // 點(diǎn)擊標(biāo)簽欄或菜單欄按鈕時(shí)的回調(diào)方法.點(diǎn)擊激活菜單欄的標(biāo)簽欄按鈕時(shí)不會(huì)觸發(fā)此方法.
if(ret) {
// alert(ret.item.type+'--'+ret.item.index);
// var item = ret.index;
// if("menu" == item.type) {
// tabBarMenu.hideMenu(); // 隱藏彈出菜單.
// }
// api.alert({
// title: "提示",
// msg: "您點(diǎn)擊了 " + item.type + " 上,第 " + item.index + " 個(gè)按鈕!",
// 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;
}
}
});
}
//創(chuàng)建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>');
}
})
}
~~~
- 關(guān)于我們
- ApiCloud
- 支付模塊
- 微信支付--wxPay(客戶端)
- 微信支付--wxPay(服務(wù)端)
- 支付寶支付--aliPay(客戶端配置)
- 支付寶支付--aliPay(服務(wù)端配置)
- DoT模板
- 緩存模塊
- 監(jiān)聽(tīng)模塊
- 百度定位模塊
- 設(shè)置狀態(tài)欄字體顏色
- 選擇城市插件
- 跨頁(yè)面執(zhí)行方法
- 安卓-點(diǎn)擊返回事件
- 上傳圖片模塊
- 點(diǎn)擊彈出放大圖片層
- 魅族手機(jī)apiready問(wèn)題
- 分享
- 跨win或frm執(zhí)行腳本
- 關(guān)于ios數(shù)字自動(dòng)識(shí)別成手機(jī)號(hào)
- 百度地圖bMap
- 語(yǔ)音識(shí)別模塊
- tabBarMenu底部導(dǎo)航
- 第三方登錄
- QQ網(wǎng)站和appQQ賬號(hào)的統(tǒng)一問(wèn)題解決
- 微信登錄
- QQ登錄
- 微博登錄
- 上拉加載、下拉刷新模塊
- 圖片緩存
- 文件和圖片緩存機(jī)制分享
- PHP
- 支付寶及時(shí)到賬
- no input file specified報(bào)錯(cuò)解決
- thinkphp 整合kindeditor
- 整合tpshop微信模塊到thinkcmf中
- thinkphp3.1.3整合支付寶
- 網(wǎng)站接入QQ OAuth2.0登錄教程
- ThinkPHP整合百度編輯器Ueditor
- PHP加快執(zhí)行效率的寫法規(guī)范
- ThinkPHP操作大全
- PHP操作大全
- Thinkphp中SQL操作返回值
- php5.3 foreach 使用&(與運(yùn)算符)引用賦值要注意的問(wèn)題
- mysql給字段追加值
- 阿里大魚短信平臺(tái)接入
- Navicat 導(dǎo)出 Mysql 數(shù)據(jù)字典
- php 面向?qū)ο笕娼坛?/a>
- PHP5下調(diào)用SOAP
- PHP處理時(shí)間格式添加空格
- 偽裝URL請(qǐng)求(.htaccess)
- url請(qǐng)求參數(shù)加解密
- JS插件
- artDialog彈窗-頁(yè)面?zhèn)髦?/a>
- jQuery點(diǎn)擊遮罩彈出層固定居中
- jeBox原生彈窗
- bxslider輪播
- js生成指定位數(shù)隨機(jī)數(shù)
- 發(fā)送短信倒計(jì)時(shí)
- js調(diào)試
- jQuery.validator 表單驗(yàn)證規(guī)則
- Swiper 輪播
- 獲得焦點(diǎn)時(shí)-圖片抖動(dòng)
- uploadify無(wú)刷新上傳圖片
- 導(dǎo)航下拉隱藏上拉顯示
- 獲得焦點(diǎn)時(shí)-加黑色蒙版
- jquery.qrcode.js生成二維條形碼(支持中文)
- jquery.qrcode.js生成二維條形碼(官方不支持中文)
- nth-child 選擇器
- 無(wú)刷新點(diǎn)擊實(shí)現(xiàn)加載更多數(shù)據(jù)
- 刷新頁(yè)面方法
- 判斷滾動(dòng)條向上向下
- 跨瀏覽器復(fù)制jQuery-zclip
- js校驗(yàn)表單后提交表單的三種方法
- 用JS判斷下拉框是否選中
- div中滾動(dòng)
- 提交時(shí)彈出模態(tài)框
- 當(dāng)圖片不顯示時(shí)替換方法
- 前端
- CSS3
- HTML5
- css技巧
- 移動(dòng)端rem
- Flex布局
- 電商詳情滾動(dòng)條監(jiān)聽(tīng)
- VueCircleMenu圓環(huán)按鈕
- iframe自適應(yīng)頁(yè)面高度
- 百度Echart
- input:radio改變選中顏色
- Jquery
- 響應(yīng)式布局基本實(shí)現(xiàn)Media Query
- 循環(huán)輸出只輸出新內(nèi)容
- 小程序
- wx.request坑
- 概要
- git操作
- 本地記住密碼
- 操作
- 生成ssh公鑰 記住密碼
- git避坑
- ES6學(xué)習(xí)手札
- 調(diào)試小插件
- 谷歌插件Postman
- PHP調(diào)試助手
- WordPress
- 緩存服務(wù)器Redis
- 在線代碼運(yùn)行 Docker
- 在ubuntu下怎樣安裝https
- BrowserSync 瀏覽器同步測(cè)試工具
- getmarkman高效的設(shè)計(jì)稿標(biāo)注、測(cè)量工具
- PHPstrom軟件
- 服務(wù)器
- linux 安裝搭建服務(wù)器配置及nginx配置
- tpshop的nginx 服務(wù)器配置方法
- (服務(wù)器訪問(wèn)文件404解決辦法)IIS 之 添加MIME擴(kuò)展類型及常用的MIME類型列表
- mysql部分
- mysql緩存
- MySql監(jiān)控工具--mytop
- MySql主從搭建
- mysql優(yōu)化
- Mysql 復(fù)制 (主從復(fù)制)
- iOS開(kāi)發(fā)筆記 - 上線流程
- VUE避坑指南
- 從零開(kāi)始學(xué)Vue
- Vue-cli
- Webpack
- VUE小記
- npm打包空白
- 打包背景圖片/項(xiàng)目圖片不顯示
- VUE避坑指南/elementUI upload 自定義http-request上傳
- 關(guān)于watch監(jiān)聽(tīng)路由重復(fù)加載方法
- 解決加載內(nèi)容的時(shí)候閃動(dòng)問(wèn)題
- vuecli沒(méi)有network訪問(wèn)地址
- python學(xué)習(xí)
- python初始
- pytho內(nèi)置函數(shù)大全
- win10 播放器播放TS文件問(wèn)題
- 設(shè)計(jì)網(wǎng)站
- VUE避坑指南/VUE-CLI部署空白
- swiper使用問(wèn)題
- uni-app學(xué)習(xí)手冊(cè)
- 目錄結(jié)構(gòu)
- layUI
- nodesass版本sassloader版本問(wèn)題
