阿里云首页 管理控制台

my.setNavigationBar

设置导航栏样式:导航栏标题、导航栏背景色、导航栏底部边框颜色、导航栏左上角 logo 图片。

使用说明

  • 导航栏左上角 logo 图片支持 gif 格式,必须使用 https 图片链接。
  • 若设置了导航栏背景色 backgroundColor,则导航栏底部边颜色 borderBottomColor 不会生效,默认会和 backgroundColor 颜色一样。
  • 导航栏背景色不支持渐变色。

示例代码

// API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
{
"defaultTitle": "设置页面导航栏"
}
<!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
<view class="page">
<view class="page-description">设置导航栏 API</view>
<form onSubmit="setNavigationBar" style="align-self:stretch">
<view class="page-section">
<view class="page-section-demo">
<input class="page-body-form-value" type="text" placeholder="标题" name="title"></input>
<input class="page-body-form-value" type="text" placeholder="导航栏背景色" name="backgroundColor"></input>
<input class="page-body-form-value" type="text" placeholder="导航栏底部边框颜色" name="borderBottomColor"></input>
<input class="page-body-form-value" type="text" placeholder="导航栏图片地址" name="image"></input>
</view>
<view class="page-section-btns">
<button type="primary" size="mini" formType="submit">设置</button>
<button type="primary" size="mini" onTap="resetNavigationBar">重置</button>
</view>
</view>
</form>
<view class="tips">
tips:
<view class="item">1. image:图片链接地址,必须 https,请使用一张3x高清图。若设置了 image,则 title 参数失效</view>
<view class="item">2. backgroundColor: 导航栏背景色,支持 16 进制颜色值</view>
<view class="item">3. borderBottomColor: 导航栏底部边框颜色,支持16进制颜色值。若设置了 backgroundColor,borderBottomColor 会不生效,默认会和 backgroundColor 颜色一样。</view>
</view>
</view>
// API-DEMO page/API/set-navigation-bar/set-navigation-bar.js
Page({
setNavigationBar(e) {
var title = e.detail.value.title;
var backgroundColor = e.detail.value.backgroundColor;
var borderBottomColor = e.detail.value.borderBottomColor;
var image = e.detail.value.image;
console.log(title)
my.setNavigationBar({
title,
backgroundColor,
borderBottomColor,
image,
})
},
resetNavigationBar() {
my.setNavigationBar({
reset: true,
title: '重置导航栏样式',
});
}
})
/* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
.page-section-btns {
padding: 26rpx;
}

入参

入参为 Object 类型,属性如下:

属性

类型

必填

描述

title

String

导航栏标题。

image

String

图片链接地址(支持 gif 格式图片),必须是https,请使用 iOS @3x 分辨率标准的高清图片。若设置了 image 则 title 参数失效。

backgroundColor

String

导航栏背景色,支持十六进制颜色值。

borderBottomColor

String

导航栏底部边框颜色,支持十六进制颜色值。若设置了 backgroundColor,则 borderBottomColor 不会生效,默认会和 backgroundColor 颜色一样。

reset

Boolean

是否重置导航栏为阿里云默认配色,默认为 false。

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。

常见问题 FAQ

小程序右上角的 分享与收藏 可以设置颜色吗?

这是默认的,无法设置颜色。

相关信息

iOS @3x 分辨率标准的更多信息,请参见Image Size and Resolution