uni-app 頭部及底部導航
阿新 • • 發佈:2020-11-13
簡單記錄,方便複製,詳見官方文件
<!-- 底部導航 --> <!-- 手機上底部導航的邊框顏色可用十六進位制設定(電腦不生效) --> "tabBar":{ "color": "#313131", "selectedColor": "#0A8EFF", "backgroundColor": "#ffffff", "fontSize": "12px", "borderStyle":"black", "iconWidth":"22px", "spacing":"6px", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/tabBar/index.png", "selectedIconPath": "static/tabBar/index_select.png", "text": "首頁" } ,{ "pagePath": "pages/zhong/zhong", "iconPath": "static/tabBar/chuli.png", "selectedIconPath": "static/tabBar/chuli_select.png", "text": "中間" } ,{ "pagePath": "pages/you/you", "iconPath": "static/tabBar/chuli.png", "selectedIconPath": "static/tabBar/chuli_select.png", "text": "右邊" } ] }
頭部設定
<!-- 一般常用 --> "style": { "navigationBarTitleText": "首頁", "navigationBarBackgroundColor":"#ffffff", "navigationBarTextStyle":"black", "app-plus":{ "titleNView":{ "titleSize":"40upx" } } }
<!-- 頭部禁用 --> "style": { "navigationBarTitleText": "首頁", "navigationStyle": "custom" }
<!-- 標題文字設定及右邊按鈕 --> "style": { "navigationBarTitleText": "中頁", "app-plus":{ "titleNView":{ "titleSize":"40upx", "buttons":[ { "text":"哈哈", "fontSize":"30upx", "width":"120upx", "colorPressed":"red" } ] } } }
<!-- 右邊兒分享圖示(各類圖示) --> "style": { "navigationBarTitleText": "二級頁", "app-plus":{ "titleNView":{ "titleSize":"40upx", "buttons": [ { "type": "share" } ] } } }
<!-- 按鈕事件 --> onNavigationBarButtonTap: function(btn) { console.log("按鈕的事件") },