（八）微信小程序：tabBar应用

时间：2020-04-25 14:17:40 阅读：55 评论：0 收藏：0 [点我收藏+]

全局配置里的tabBar

　　1.查看API中的全局配置，了解tabBar的结构

　　　　　　技术分享图片

　　　　　　根据API设置属性：

　　　　　技术分享图片

　　　　　　设置tabBar中的字体+背景：

　　　　　　　　　　技术分享图片

　　　2.主要在app.json中进行全局配置即可

{
  "pages": [   
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news",
    "pages/news/news-details/news-details",
    "pages/movie/movie"
  ],
  "window":{
    "navigationBarBackgroundColor":"#109D59",
    "navigationBarTextStyle": "white"
  },
  "tabBar":{
      "color":"#000",
      "selectedColor":"#109D59",
      "backgroundColor":"#fff",
      "borderStyle":"black",
      "position":"bottom",
    "list":[
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath":"./image/n_t2.png",
        "selectedIconPath":"./image/s_t2.png"
      },{
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath":"./image/n_d1.png",
        "selectedIconPath":"./image/s_d1.png"
      }
    ]
  }
}