微信小程序导航栏

微信小程序导航栏

一、顶部导航栏

• 在项目中找到pages.josn文件，源代码如下：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}}
}

• pages：设置页面路径及窗口表现，即小程序中每一页的路径和导航栏样式，配置完成之后，只有配置的页面才有配置的功能

• globalStyle：设置默认页面的窗口表现，即小程序中的全局配置，配置完成之后，全部页面都有一样的功能

• pages和globalStyle中的样式一致，作用域和级别不一样，页面中配置项会覆盖 globalStyle 中相同的配置项

各属性详解：

1. path

   页面路径，和之前讲图片标签时的路径使用方法一致

2. style

   样式，所有的局部样式配置，必须在style里面才能生效

3. navigationBarTitleText

   导航栏标题文字内容，字符串类型

"navigationBarTitleText": "首页"

4. navigationBarTextStyle

导航栏标题颜色及状态栏前景颜色，仅支持 black/white，默认值为black

"navigationBarTextStyle": "black"

5. navigationBarBackgroundColor

导航栏背景颜色，默认值为#F8F8F8，颜色的设定仅支持十六进制

"navigationBarBackgroundColor": "#f4a460"

6. enablePullDownRefresh

是否开启下拉刷新，默认值为false

"enablePullDownRefresh": true

7. navigationStyle

导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏

"navigationStyle": "default"

"navigationStyle": "custom"//设置之后，顶部导航栏消失

8.backgroundColor

下拉显示出来的窗口的背景色，默认值为#ffffff，颜色的设定仅支持十六进制

"backgroundColor": "#ff4500"

顶部导航栏常用配置：

{// 设置页面路径及窗口表现"pages": [{// 页面路径"path": "pages/index/index",// 页面样式"style": {// 样式配置和globalStyle中保持一致,页面中配置项会覆盖 globalStyle 中相同的配置项"navigationBarTitleText": "首页"}}],// 设置默认页面的窗口表现"globalStyle": {// 导航栏标题颜色，仅支持black和white"navigationBarTextStyle": "black",// 导航栏标题文字内容，字符串类型"navigationBarTitleText": "uni-app",// 导航栏背景颜色，颜色设定仅支持十六进制，默认值为#F8F8F8"navigationBarBackgroundColor": "#f4a460",// 是否开启下拉刷新，值为boolean值，true或false"enablePullDownRefresh": true,// 下拉显示出来的窗口的背景色，颜色设定仅支持十六进制，默认值为#ffffff"backgroundColor": "#ff4500",// 导航栏样式，默认值为default，custom为设置导航栏消失// "navigationStyle": "custom",// 设置编译到 App 平台的特定样式，现阶段了解即可"app-plus": {"background": "#efeff4"}}
}

二、底部导航栏

• 在微信小程序中，提供了一个tabBar 属性，用来设置底部导航栏

• 在设置底部导航栏之前，需要创建至少两个页面，这里我们新创建一个person页面，然后在pages.josn文件中写入以下代码：（属性的属性值根据具体情况进行更改）

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/home.png","selectedIconPath": "static/home_light.png"},{"pagePath": "pages/person/person","text": "我的","iconPath": "static/person.png","selectedIconPath": "static/person_light.png"}]}

上面代码中，各属性的意义：

1. list

   tab 的列表，最少2个、最多5个 tab

2. pagePath

   页面路径，必须在 pages 中先定义

   "pagePath": "pages/index/index"
   

3. text

   tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标

   "text": "我的"
   

4. iconPath

   图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标

   "iconPath": "static/person.png"
   

5. selectedIconPath

   选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

   "selectedIconPath": "static/person_light.png"
   

6. color

   tab 上的文字默认颜色

"color": "#fa8072"

7. selectedColor

   tab 上的文字选中时的颜色

"selectedColor": "#ff00ff"

8. backgroundColor

   tab 的背景色

"backgroundColor": "#afeeee"

9. borderStyle

   tabbar 上边框的颜色，可选值 black/white，black对应颜色rgba(0,0,0,0.33)，white对应颜色rgba(255,255,255,0.33)，默认值为black

"borderStyle": "white"

10. position

    底部导航栏的位置，默认值为bottom

"position": "top"

底部导航栏常用配置：

"tabBar": {// tab 上的文字默认颜色"color": "#fa8072",// tab 上的文字选中时的颜色"selectedColor": "#ff00ff",// tab 的背景色"backgroundColor": "#afeeee",// tabbar 上边框的颜色"borderStyle": "white",// 导航栏的位置,默认值为bottom// "position": "top",// tab 的列表，最少2个、最多5个 tab"list": [// 第一个页面{// 页面路径，必须在 pages 中先定义"pagePath": "pages/index/index",// tab 上按钮文字,可不填"text": "首页",// 图片路径"iconPath": "static/home.png",// 选中时的图片路径"selectedIconPath": "static/home_light.png"},// 第二个页面{"pagePath": "pages/person/person","text": "我的","iconPath": "static/person.png","selectedIconPath": "static/person_light.png"}]}

三、小程序图标来源

阿里矢量图标库

官网网址：https://www.iconfont.cn/