wap2app导航栏配置

wap2app默认会以新窗体的方式打开每个要展现的url,每个新窗体默认都带有原生的导航栏。

开发者可以通过navigationbar节点配置导航栏的背景色、标题内容、标题颜色、标题文字大小;wap2app默认生成灰底黑字的导航栏,参考__wap2appconfig.js中如下代码:

navigationbar: {
backgroundColor: '#f7f7f7',//导航栏背景色
titleText: '我的项目',//导航栏标题
titleColor: '#000000',//标题颜色
titleSize: '17px'//标题字体大小
}
\n

开发者可根据产品整体风格设置导航栏样式,比如希望黑底白字,则如下修改__wap2appconfig.js代码即可:

navigationbar: {
backgroundColor: '#1B1A1F',//黑色背景
titleText: '我的项目',//导航栏标题
titleColor: '#FFFFFF',//白色文字
titleSize: '17px'
}
\n

如上设置为应用全局设置,开发者可以在页面组中为每个页面组单独设置,比如详情页面导航栏标题设置为“新闻详情”,如下:

!(function() {
wap2app.init({
globalOptions: {
matchHostnames: "m.mydomain.com", //通用域名匹配
navigationbar: {
backgroundColor: '#1B1A1F',//导航栏背景色
titleText: '我的项目',//导航栏标题
titleColor: '#FFFFFF',//标题颜色
titleSize: '17px'//标题字体大小
},
},
webviews: {
'launch': {//首页
url: 'http://m.mydomain.com',
},
'detail':{//详情页
matchPathnames:/\/detail\/\d+/, //匹配类似“/detail/001”的格
navigationbar:{
titleText:"新闻详情" //单独设置新闻详情页的标题内容
}
}
}
});
})();
\n

在有原生导航条的情况下,wap站就不再需要显示HTML5导航栏,否则会出现原生、HTML5双标题并存的情况。为避免双标题并存的情况,需要去除wap版的导航栏,参考如何在流应用环境下去wap化展现形式教程,将wap导航栏当做一种特殊的wap化展现,类似移除原生下载条一样移除wap导航栏即可。

透明渐变导航栏

设置透明渐变导航栏,只需要在navigationbar节点下增加type:'transparent'即可,如下是一个示例:

'detail':{
matchPathnames:/\/app\/\d+/,
navigationbar:{
backgroundColor: '#f7f7f7',//导航栏背景色
type:'transparent',//透明渐变样式
}
}
\n
2 分享
DCloud_客服_Trust 1233344@qq.com

要回复文章请先登录注册