微信小程序不同页面设置不同的顶部导航栏（名称、背景色、文本颜色等）方法

微信小程序可以通过 window 对顶部导航栏（navigationBar）进行自定义配置，包括名称、背景色、文本颜色等，一般是在 app.json 中添加该配置项：

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "零五网（www.02405.com）",
    "navigationBarTextStyle": "black",
  },

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段），具体的取值和含义可参考全局配置文档中说明。

因此我们在特定页面的 json 文件中，可以覆盖全局配置，实现不同页面设置不同的顶部导航栏（名称、背景色、文本颜色等）。

附：支持覆盖的配置项列表

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。
homeButton	boolean	false	在非首页、非页面栈最底层页面或非 tabbar 内页面中的导航栏展示 home 键
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape` 详见响应显示区域变化
disableScroll	boolean	false	设置为 `true` 则页面整体不能上下滚动。只在页面配置中有效，无法在 `app.json` 中设置
usingComponents	Object	否	页面自定义组件配置
initialRenderingCache	string		页面初始渲染缓存配置，支持 `static` / `dynamic`
style	string	default	启用新版的组件样式
singlePage	Object	否	单页模式相关配置
restartStrategy	string	homePage	重新启动策略配置
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 `static` / `manual` / `auto`
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`，若对页面单独设置则会覆盖全局的配置，详见全局配置
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见全局配置
renderer	string	否	渲染后端

(adsbygoogle = window.adsbygoogle || []).push({});

来源：https://www.02405.com/archives/6868

猜你喜欢