阅读 419

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

展示一下实际效果:


原文:https://www.cnblogs.com/chenyangjava/p/14701115.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐