首页 > 微信 > 详细

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

时间:2020-04-25 14:17:40      阅读:54      评论: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"
      }
    ]
  }
}
View Code

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

              技术分享图片

 

    3.加上tabBar页面效果

          技术分享图片

 

 

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

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

原文:https://www.cnblogs.com/happy-prince/p/12772647.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!