在pages.json中配置:
{
"pages": [ //pages数组中第一项表示应用启动页,
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"navigationBarBackgroundColor": "#ffffff",
"app-plus": {
"titleNView": false,
"type": "transparent" //透明渐变导航栏 App-nvue 2.4.4+ 支持
}
}
},
// #ifdef APP-PLUS || MP-WEIXIN
{
"path": "pages/station/detail",
"style": {
"navigationBarTitleText": "电站详情",
"app-plus": {
"titleNView": {
"backgroundImage": "linear-gradient(to top, #abc837, #4fa23c)"
}
},
"enablePullDownRefresh": true, //设置为true表示当前页面开启下拉刷新
"backgroundTextStyle": "dark" //下拉 loading 的样式,仅支持 dark/light
// ,
// "app-plus": {
// "titleNView": {
// "titleText": "",
// "tags": [{
// "tag": "img",
// "src": "/static/img/sta/bja.png",
// "position": {
// "right": "10px",
// "top": "auto",
// "width": "26px",
// "height": "26px"
// }
// }],
// "buttons": [ //原生标题栏按钮配置,
// {
// "type": "none",
// "text": "",
// "float": "right"
// }
// ]
// }
// }
}
},
// #endif
],
"tabBar": {
"color": "#7a7e83",
"selectedColor": "#42b727",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/main/main",
"text": "首页",
"iconPath": "static/img/icon-index_n.png",
"selectedIconPath": "static/img/icon-index_s.png"
},
{
"pagePath": "pages/station/station",
"text": "电站",
"iconPath": "static/img/icon-dz_n.png",
"selectedIconPath": "static/img/icon-dz_s.png"
},
{
"pagePath": "pages/alarm/alarm",
"text": "故障",
"iconPath": "static/img/icon-gj_n.png",
"selectedIconPath": "static/img/icon-gj_s.png"
},
{
"pagePath": "pages/user-center/user-center",
"text": "个人",
"iconPath": "static/img/icon-ren_n.png",
"selectedIconPath": "static/img/icon-ren_s.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#4fa23c",
"backgroundColor": "#fbf9fe"
}
}
特别注意:需要用
// #ifdef APP-PLUS || MP-WEIXIN
// #endif
包裹在路由头部和尾部生成app才有效果
在"app-plus":对象中添加属性设置:
"titleNView": {
"backgroundImage": "linear-gradient(to top, #abc837, #4fa23c)"
}
展示一下实际效果: