[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图标的制作 * 使用阿里矢量图标库进行制作