微信小程序入门: 导航栏样式、tabBar导航栏_微信小程序

上一篇: 微信小程序实现随机验证码功能下一篇:入门微信小程序

微信小程序入门: 导航栏样式、tabBar导航栏

发布时间：2019-06-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了微信小程序入门: 导航栏样式、tabBar导航栏，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

导航栏样式设置
小程序的导航栏样式在app.json中定义。
这里设置导航，背景黑色，文字白色，文字内容测试小程序
app.json内容：


      
      
      
      @H_304_19@
      
{
  "pages":[
    "pages/index/index",
    "pages/login/LOGin",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTITleText": "测试小程序",
    "navigationBarTextStyle":"#fff"
  }
}

window中的样式说明：

效果：

tabBar导航栏
tabBar挺好的，可以放置于顶部或者底部，用于不同功能页面的切换。
tabBar同样在app.json中进行定义，看一下我在app.json中对tabBar的相关定义：

      
      
      
      
      
"tabBar": {
    "selectedColor": "#1296db",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/ico-home.png",
      "selectedIconPath": "images/ico-home-d.png"
    },{
      "pagePath": "pages/setting/setting",
      "text": "设置",
      "iconPath": "images/ico-setting.png",
      "selectedIconPath": "images/ico-setting-d.png"
    },{
      "pagePath": "pages/help/help",
      "text": "帮助",
      "iconPath": "images/ico-help.png",
      "selectedIconPath": "images/ico-help-d.png"
    }]
  }

效果：

tabBar相关属性定义说明：

tabBar list定义说明：

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。