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