微信小程序-底部/顶部导航栏

先从顶部导航栏开始吧

第一步：在app.json中添加路径目录，目前有两个目录

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
   ]
}

第二步：还是在app.json中定义window属性

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3B3B3B",
    "navigationBarTitleText": "顶部导航栏",
    "navigationBarTextStyle": "white"
  }

其中，常用的window属性包括

属性	描述
navigationBarBackgroundColor	导航栏背景颜色
navigationBarTextStyle	导航栏标题颜色仅支持black/white
navigationBarTitleText	导航栏文字内容
backgroundTextStyle	下拉loading的样式仅支持dark/light

其他属性操作见官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

效果如下：

下面说一下底部导航栏的设置

达到上面的效果，只需要在在app.json中设置tabBar属性，常用的属性说一下吧

color	导航栏文字的颜色
selectedColor	导航栏文字选中时候的颜色
backgroundColor	导航栏背景色
borderStyle	导航栏边框颜色仅支持black/white
list	导航栏的列表，至少两个
position	导航栏的位置仅支持top/bottom

"tabBar": {
      "color": "black",
      "selectedColor": "#009aff",
      "backgroundColor": "#0000",
      "borderStyle": "black",
      "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "/images/home.png",
            "selectedIconPath": "/images/homeselect.png"
        },
        {
            "pagePath": "pages/discount/discount",
            "text": "活动",
            "iconPath": "/images/discount.png",
            "selectedIconPath": "/images/discountselect.png"     
        },
        {
          "pagePath": "pages/teamList/teamList",
          "text": "设置",
          "iconPath": "/images/teamList.png",
          "selectedIconPath": "/images/teamListselect.png"
        },
        {
            "pagePath": "pages/user/user",
            "text": "我的",
            "iconPath": "/images/user.png",
            "selectedIconPath": "/images/userselect.png"        
        }
       ]
  }

其中list每一项都是一个对象，属性说明入下：

属性	说明
pagePath	页面路径，必须在 pages 中先定义
text	tab 上按钮文字
iconPath	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `postion` 为 `top` 时，不显示 icon。
selectedIconPath	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `postion` 为 `top` 时，不显示 icon。

当然啦，不要忘记在app.json的page属性中定义这四个路径目录

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/teamList/teamList",
    "pages/discount/discount",
    "pages/user/user",
  ],

微信小程序-底部/顶部导航栏

猜你喜欢