开始

D:\wjw\学习中\uni-app\网易云课堂 - uni-app实战仿糗事百科app开发

image.png
D:\wjw\学习中\uni-app\网易云课堂 - uni-app实战仿糗事百科app开发\糗事\App截图\首页

image.png
先来下载图标，底部导航所有的都在这里进行配置。
image.png
开始写tabbar
image.png
默认样式和选中后的样式
image.png

image.png

上边框
image.png
image.png
lists是一个数组
image.png
直接用取色器吸取颜色
image.png
image.png
在tabbar下面的list里面写各个tabbar的数据
image.png

list里面的属性
pagePath就是底部导航分别链接到哪个页面的。
image.png
删除测试页面
image.png
这里也要手动的删除一下
image.png

创建底部导航栏的几个页面

image.png

image.png

配置每个元素tabbar

image.png

image.png
取图片默认的颜色
image.png

大小和颜色。
image.png
选中状态颜色
image.png

image.png

image.png
都复制到这里
image.png

image.png

  1. {
  2.             "pagePath": "pages/index/index",
  3.             "text": "糗事",
  4.             "iconPath": "/static/tabbar/index.png",
  5.             "selectedIconPath": "/static/tabbar/indexed.png"
  6.         }, {
  7.             "pagePath": "pages/news/news",
  8.             "text": "动态",
  9.             "iconPath": "/static/tabbar/news.png",
  10.             "selectedIconPath": "/static/tabbar/newsed.png"
  11.         }

image.png

  1. {
  2.             "pagePath": "pages/paper/paper",
  3.             "text": "小纸条",
  4.             "iconPath": "/static/tabbar/paper.png",
  5.             "selectedIconPath": "/static/tabbar/papered.png"
  6.         }, {
  7.             "pagePath": "pages/home/home",
  8.             "text": "我的",
  9.             "iconPath": "/static/tabbar/home.png",
  10.             "selectedIconPath": "/static/tabbar/homeed.png"
  11.         }

image.png

image.png

最终代码

  1. "tabBar": {
  2.         "color": "#ADADAD",
  3.         "selectedColor": "#FEE42A",
  4.         "backgroundColor": "#FFFFFF",
  5.         "borderStyle": "black",
  6.         "list": [{
  7.             "pagePath": "pages/index/index",
  8.             "text": "糗事",
  9.             "iconPath": "/static/tabbar/index.png",
  10.             "selectedIconPath": "/static/tabbar/indexed.png"
  11.         }, {
  12.             "pagePath": "pages/news/news",
  13.             "text": "动态",
  14.             "iconPath": "/static/tabbar/news.png",
  15.             "selectedIconPath": "/static/tabbar/newsed.png"
  16.         }, {
  17.             "pagePath": "pages/paper/paper",
  18.             "text": "小纸条",
  19.             "iconPath": "/static/tabbar/paper.png",
  20.             "selectedIconPath": "/static/tabbar/papered.png"
  21.         }, {
  22.             "pagePath": "pages/home/home",
  23.             "text": "我的",
  24.             "iconPath": "/static/tabbar/home.png",
  25.             "selectedIconPath": "/static/tabbar/homeed.png"
  26.         }]
  27.     }

结束