Tabbar

底部导航

实现tabbar建议采用小程序原生的tabbar，通过设置page/main.js（即对应小程序中app.json）来实现，详情请看小程序文档。示例如下，仅作参考：

  1. tabBar: {
  2.   color: '#999999',
  3.   selectedColor: '#1AAD16',
  4.   backgroundColor: '#ffffff',
  5.   borderStyle: 'white',
  6.   /* eslint-disable */
  7.   list: [{
  8.       pagePath: 'pages/tabbar/tabbar',
  9.       text: '微信',
  10.       iconPath: 'static/images/icon_nav_button.png',
  11.       selectedIconPath: 'static/images/icon_nav_button.png'
  12.     },
  13.     {
  14.       pagePath: 'pages/tabbar/tabbar',
  15.       text: '通讯录',
  16.       iconPath: 'static/images/icon_nav_cell.png',
  17.       selectedIconPath: 'static/images/icon_nav_cell.png'
  18.     },
  19.     {
  20.       pagePath: 'pages/tabbar/tabbar',
  21.       text: '发现',
  22.       iconPath: 'static/images/icon_nav_cell.png',
  23.       selectedIconPath: 'static/images/icon_nav_cell.png'
  24.     },
  25.     {
  26.       pagePath: 'pages/tabbar/tabbar',
  27.       text: '我',
  28.       iconPath: 'static/images/icon_nav_toast.png',
  29.       selectedIconPath: 'static/images/icon_nav_toast.png'
  30.     }
  31.   ]
  32.   /* eslint-enable */
  33. }

效果

tabbar01