// 定义详情页
var detail = null
// 定义原始导航配置变量
var titleNView = { //详情页原生导航配置backgroundColor: '#F7F7F7', //导航栏背景色titleText: '', //导航栏标题titleColor: '#000000', //文字颜色type: 'transparent', //透明渐变样式autoBackButton: true, //自动绘制返回箭头splitLine: { //底部分割线color: '#cccccc'}
}// 预加载详情页detail
var detail = mui.preload({url:'detail.html',id:'detail',styles:{"titleNView": titleNView},//窗口参数extras:{}//自定义扩展参数
})function openDetail(id) {mui.fire(detail,'detail',{detailID: id})titleNView.titleText = '详情测试页'detail.setStyle({'titleNView': titleNView})setTimeout(function() {detail.show();}, 150);
}
打开带原生导航栏的新页面
mui.openWindow({url: webviewUrl,id: webviewId,styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置titleNView: { // 窗口的标题栏控件titleText:"标题栏", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"titleSize:"17px", // 字体大小,默认17pxbackgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"progress:{ // 标题栏控件的进度条样式color:"#00FF00", // 进度条颜色,默认值为"#00FF00" height:"2px" // 进度条高度,默认值为"2px" },splitLine:{ // 标题栏控件的底部分割线，类似borderBottomcolor:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC" height:"1px" // 分割线高度,默认值为"2px"}}}
});WebviewTitleNViewStyles
窗口标题栏控件样式
说明：
标题栏控件固定高度为44px,可通过Webview窗口对象的getTitleNView方法获取标题栏原生控件对象plus.nativeObj.View，调用其方法绘制自定义内容。 可以通过WebviewObject对象的setStyle方法传入titleNView属性更新样式，如wobj.setStyle({titleNView:{titleColor:'#FF0000'}})。
属性：
- autoBackButton: (Boolean 类型 )标题栏控件是否显示左侧返回按钮
可取值： "true" - 显示返回按钮； "false" - 不显示返回按钮。 默认值为"false"。 返回按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。 点击返回按钮的逻辑与按下系统返回键逻辑一致。
- backButton: (WebviewTitleNViewBackButtonStyles 类型 )标题栏控件的返回按钮的样式
当autoBackButton设置为true时生效。 通过此属性可自定义返回按钮样式，如图标大小、红点、角标、标题等。
注意：HBuilderX2.6.3+版本支持。 - backgroundColor: (String 类型 )标题栏控件的背景颜色
颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景； "rgba(R,G,B,A)"，如rgba(255,0,0,0.5)表示半透明红色背景。 默认值为"#F7F7F7"。
- backgroundImage: (String 类型 )设置标题栏的背景图
支持以下类型： 背景图片路径 - 如"./img/t.png"，仅支持本地文件路径， 相对路径，相对于当前页面的host位置，根据实际标题栏宽高拉伸绘制； 渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”， 其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变， “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角。 默认无渐变效果，设置错误格式数据也无渐变效果。
注意：HBuilderX2.6.3+版本支持。 - backgroundRepeat: (String 类型 )设置标题栏的背景图平铺方式
仅在backgroundImage设置为图片路径时有效。 可取值：
- "repeat" - 背景图片在垂直方向和水平方向平铺
- "repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸
- "repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸
- "no-repeat" - 背景图片在垂直方向和水平方向都拉伸
注意：HBuilderX2.6.3+版本支持。 - blurEffect: (String 类型 )模糊（毛玻璃）效果
此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。 可取值：
- "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果
- "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果
- "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果
- "none" - 无模糊效果
注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。平台支持
- Android - ALL (不支持) :
忽略此属性。
- iOS - 8.0+ (支持)
- buttons: (Array[WebviewTitleNViewButtonStyles] 类型 )标题栏上的自定义按钮
创建的自定义按钮数目不限制，实际应用中建议最多设置4个按钮（包括左侧返回按钮）。 注意：此属性不支持动态修改，仅在创建titleNView时设置有效。
- coverage: (String 类型 )标题栏控件变化作用范围
仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。 当页面滚动到指定偏移量时标题栏背景变为完全不透明。 支持百分比、像素值，默认为'132px'。
- homeButton: (Boolean 类型 )标题栏控件是否显示Home按钮
可取值： "true" - 显示Home按钮； "false" - 不显示Home按钮。 默认值为"false"。 Home按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。 点击Home按钮的逻辑为关闭所有非首页窗口，显示首页窗口。
- padding: (String 类型 )内边距
标题栏左右的内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。 默认值为"0px"。
- padding-right: (String 类型 )右内边距
标题栏右侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。 默认值为"0px"，优先级padding-right > padding。
- padding-left: (String 类型 )左内边距
标题栏左侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。 默认值为"0px"，优先级padding-left > padding。
- progress: (WebviewProgressStyles 类型 )标题栏控件的进度条样式
设置此属性则在标题栏控件的底部显示进度条，可配置进度条颜色值即高度。 设置此属性值为undefined或null则隐藏进度条。 默认不显示底部进度条。 注意：此属性将废弃，推荐使用WebviewStyles的progress。
- redDotColor: (String 类型 )标题栏控件上按钮的红点颜色
可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。 默认值为红色。
- searchInput: (WebviewTitleNViewSearchInputStyles 类型 )标题栏上的搜索框样式
- splitLine: (WebviewSplitLineStyles 类型 )标题栏的底部分割线
设置此属性则在标题栏控件的底部显示分割线，可配置颜色值及高度。 设置此属性值为undefined或null则隐藏分割线。 默认不显示底部分割线。
注意：HBuilderX2.6.6+版本支持。 - subtitleColor: (String 类型 )副标题文字颜色
颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。 默认值与主标题文字颜色一致。
注意：HBuilderX2.6.6+版本支持。 - subtitleSize: (String 类型 )副标题文字字体大小
字体大小单位为像素，如"14px"表示字体大小为14像素，默认值为12像素。
注意：HBuilderX2.6.6+版本支持。 - subtitleOverflow: (String 类型 )标题文字超出显示区域时处理方式
可取值：
- "clip" - 超出显示区域时内容裁剪
- "ellipsis" - 超出显示区域时尾部显示省略标记（...）
注意：HBuilderX2.6.6+版本支持。 - subtitleText: (String 类型 )副标题文字内容
设置副标后将显示两行标题，副标显示在主标题（titleText）下方。
注意：HBuilderX2.6.6+版本支持。 - tags: (Array[plus.nativeObj.ViewDrawTagStyles] 类型 )标题栏上初始自定义绘制内容
可用于设置自定义绘制图片、矩形区域、文本等内容。 注意：此属性不支持动态修改，仅在创建titleNView时设置有效，如果需要更新绘制内容可根据tags的id调用draw方法操作。
- titleAlign: (String 类型 )标题对齐方式
可取值：
- "center"-居中对齐
- "left"-居左对齐
- "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐）
- titleColor: (String 类型 )标题文字颜色
颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。 type=transparent时默认值为"#FFFFFF"，其它情况默认值为"#000000"。
- titleIcon: (String 类型 )标题图标
图标路径如"./img/t.png"，相对路径，相对于当前页面的host位置，默认宽高为逻辑像素值"34px"。
HBuilderX2.6.9+版本支持网络路径（http/https开头的url链接）；
HBuilderX2.6.12+版本支持base64图片。
注意：要求图片的宽高相同。 - titleIconRadius: (String 类型 )标题图标圆角
取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。 默认值为无圆角。
- titleIconWidth: (String 类型 )标题图标宽度
取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示图标宽度为10像素，图标高度会自动与图标宽度保持一致，默认值为"34px"。
HBuilderX2.7.6+版本支持设置图标宽度。
注意：图标在标题栏垂直居中。 - titleOverflow: (String 类型 )标题文字超出显示区域时处理方式
可取值： "clip" - 超出显示区域时内容裁剪； "ellipsis" - 超出显示区域时尾部显示省略标记（...）。 默认值为"ellipsis"。
- titleSize: (String 类型 )标题文字字体大小
字体大小单位为像素，如"20px"表示字体大小为20像素，默认值为17像素。
- titleText: (String 类型 )标题文字内容
在标题栏控件居中（水平和垂直）显示，左右边距为88px，如果文本过长则尾部裁剪（加三个点"..."）显示。 当不设置titleText属性或属性值为undefined/null时，使用当前Webview窗口加载页面的标题，并自动同步更新页面的标题。
- type: (String 类型 )标题栏控件样式
可取值：
- "default" - 默认样式，顶部停靠显示，挤压Webview页面内容显示区域
- "transparent" - 透明样式，顶部沉浸式显示覆盖Webview页面内容，标题栏上内容（除按钮外）全部透明，当页面滚动时透明度逐渐变化，直到不透明显示
- "float" - 悬浮样式，顶部悬浮显示，标题栏覆盖在Webview上，此时应该设置标题栏背景颜色（backgroundColor）为半透明才能透视到覆盖Webview的内容
注意：此属性不支持动态更新。
