微信小程序 底部导航tobBar实现 和 界面顶部显示

微信小程序 底部导航topBar实现

效果图展示

代码：

app.jaon

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/second/second",
    "pages/three/three",
    "pages/last/last"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  
  "tabBar": {
    "color": "#666666",
    "selectedColor": "blue",
    "borderStyle": "black",
    "backgroundColor": "#000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/images/homepage.png",
        "selectedIconPath": "/static/images/homepage_fill.png"
      },
      {
        "pagePath": "pages/second/second",
        "text": "分类",
        "iconPath": "/static/images/manage.png",
        "selectedIconPath": "/static/images/manage_fill.png"
      },
      {
        "pagePath": "pages/three/three",
        "text": "账号",
        "iconPath": "/static/images/mine.png",
        "selectedIconPath": "/static/images/mine_fill.png"
      }
    ]
  }
}

属性解释

tabBar 指底部的 导航配置属性

color 未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字

微信小程序 界面顶部显示

效果图

1. 未加样式前，界面顶部显示
   
2. 添加样式后，界面顶部展示：
   

代码实现

• 对哪一个页面顶部显示，修改对应的.json 文件。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#489B81",
  "navigationBarTitleText": "首页",
  "navigationBarTextStyle": "white"
}

属性解释

navigationBarBackgroundColor：表示顶部颜色

navigationBarTitleText：顶部显示字体内容

navigationBarTextStyle： 顶部字体颜色