[toc] # 1.5 底部導航和凸起按鈕配置 ## 1.5.1 實現效果圖  ## 1.5.2 創建底部導航 1. 在pages目錄下創建發現頁面和我的頁面  2. 在pages.json文件內配置底部導航 * 參考地址: https://uniapp.dcloud.io/collocation/pages?id=tabbar ``` "tabBar": { "color":"#707070", "selectedColor":"#8745FF", "backgroundColor":"#ffffff", "borderStyle":"black", "midButton": { "iconPath":"static/tabbar/min.png", "iconWidth":"60px", "height" : "65px" }, "list": [ { "iconPath":"static/tabbar/find.png", "selectedIconPath":"static/tabbar/find-selected.png", "text" : "發現", "pagePath":"pages/index/index" }, { "iconPath":"static/tabbar/my.png", "selectedIconPath":"static/tabbar/find-selected.png", "text":"我的", "pagePath":"pages/my/my" } ] } ``` * 效果演示  ## 1.5.3 給tabbar中間按鈕設置點擊效果 * 參考地址: https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap * 在App.vue組件中的onLaunch方法定義監聽點擊中間按鈕觸發的方法 ``` <script> export default { onLaunch: function() { //處理nvue加載自定義圖標 const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "iconfont", 'src': "url('http://at.alicdn.com/t/font_1859985_7mxozsfdvib.ttf')" }); //監聽中間按鈕的點擊事件 uni.onTabBarMidButtonTap(function(){ console.log("點擊了中間按鈕") }) }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script> ``` 4. tabbar圖標的制作 * 使用阿里矢量圖標庫進行制作