tencent cloud

小程序导航栏图标

PDF
聚焦模式
字号
最后更新时间: 2025-07-04 17:33:27

定制导航栏按钮

1. 返回按钮

返回按钮默认样式如下:

小程序 SDK 提供返回按钮自定义的功能,可以通过重写 AbsMiniUiProxy 的 navBarBackRes 方法实现。
API 定义如下:
方法参数mode:表示导航栏标题颜色,1 表示黑色标题,0表示白色标题;
方法返回值:表示返回按钮的icon资源ID。
/**
* 自定义导航栏返回按钮icon, 尺寸要求=24x43
* 调用环境:子进程
*
* @param mode 导航栏标题颜色, 1:black 0:white
* @return
*/
@DrawableRes
int navBarBackRes(int mode);
注意:
返回按钮 icon 资源的尺寸要求为:24x43。
示例代码:
@Override
public int navBarBackRes(int mode) {
if(mode == 0) {//black
return R.drawable.back_icon;//your black icon res
}else {//white
return R.drawable.white_icon;//your white icon res
}
}

2.home按钮

home 按钮默认样式如下:

小程序 SDK 提供 home 按钮自定义的功能,可以通过重写 AbsMiniUiProxy 的 homeButtonRes 方法实现
API 定义如下:
方法参数 mode:表示导航栏标题颜色,1 表示黑色标题,0表示白色标题;
方法返回值:表示home按钮的icon 资源 ID。
/**
* 导航栏返回home按钮icon, 尺寸要求=48x48
* 调用环境:子进程
*
* @param mode 导航栏标题颜色, 1:black 0:white
* @return
*/
@DrawableRes
int homeButtonRes(int mode);
注意:
尺寸要求:导航栏home按钮icon, 尺寸要求=48x48。
示例代码:
@Override
public int homeButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.home_black_icon;
}else {
return R.drawable.home_white_icon;
}
}

3.更多按钮

更多按钮默认样式如下:



小程序SDK提供更多按钮自定义的功能,可以通过重写 AbsMiniUiProxy 的 moreButtonRes 方法实现。
API定义如下:
方法参数mode:表示导航栏标题颜色,1 表示黑色标题,0表示白色标题;
方法返回值:表示更多按钮的icon资源ID。
/**
* 导航栏更多按钮icon, 尺寸要求=80x59
* 调用环境:子进程
*
* @param mode 导航栏标题颜色, 1:black 0:white
* @return
*/
@DrawableRes
int moreButtonRes(int mode);
注意:
尺寸要求:导航栏更多按钮icon, 尺寸要求=80x59。
示例代码:
@Override
public int moreButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.more_black_icon;
}else {
return R.drawable.more_white_icon;
}
}

4.小程序关闭按钮

小程序关闭按钮默认样式如下:

小程序 SDK 提供关闭按钮自定义的功能,可以通过如下方式实现:
自定义关闭按钮:
重写 AbsMiniUiProxy 的 closeButtonRes 方法。
API 定义如下:
API 说明:
方法参数 mode:表示导航栏标题颜色,1 表示黑色标题,0表示白色标题。
方法返回值:表示关闭按钮的 icon 资源 ID。
/**
* 导航栏关闭按钮icon, 尺寸要求=80x59
* 调用环境:子进程
*
* @param mode 导航栏标题颜色, 1:black 0:white
* @return
*/
@DrawableRes
int closeButtonRes(int mode);
注意:
尺寸要求:导航栏关闭按钮icon, 尺寸要求=80x59。
示例代码:
@Override
public int closeButtonRes(int mode) {

if(mode == 0) {//black
return R.drawable.close_black_icon;
}else {
return R.drawable.close_white_icon;
}
}

5.胶囊按钮分割线

小程序胶囊按钮分割线默认样式如下:



小程序 SDK 提供自定义胶囊按钮分割线的功能,可以通过重写 AbsMiniUiProxy 的 lineSplitBackgroundColor 方法实现。
API 定义如下:
方法返回值:表示分割线背景颜色
/**
* 胶囊按钮中间分割线背景颜色
* 调用环境:子进程
*
* @return
*/
@DrawableRes
int lineSplitBackgroundColor();
示例代码:
@Override
public int lineSplitBackgroundColor() {
return Color.RED;
}



帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈