(八)微信小程序:tabBar应用

全局配置里的tabBar

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

      (八)微信小程序:tabBar应用

 

       根据API设置属性:

     (八)微信小程序:tabBar应用

 

       设置tabBar中的字体+背景:

          (八)微信小程序:tabBar应用

 

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

(八)微信小程序:tabBar应用
{
  "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"
      }
    ]
  }
}
View Code

        注意:唯一需要更改的是在index页面跳转到news页面时的wx.navigateTo()   更改为wx.switchTab()

              (八)微信小程序:tabBar应用

 

    3.加上tabBar页面效果

          (八)微信小程序:tabBar应用

 

 

   本节实现了tabBar导航栏的功能,那么我们发现电影页面还是空荡荡的~,所以下一节进行电影界面UI设计  开森不开森~

(八)微信小程序:tabBar应用

上一篇:小程序页面跳转 之 js页面函数绑定跳转


下一篇:微信小程序 wx.showModal去掉取消按钮以及自定样式