uniapp app头部渐变

在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)"
}

展示一下实际效果:

uniapp app头部渐变



uniapp app头部渐变

上一篇:vue安卓苹果下载链接合并


下一篇:uniapp @change事件传多个参数