uniapp 微信小程序 navigationBarBackgroundColor 标题栏颜色渐变

大体思路: 第一步:"navigationStyle":"custom"

第二步: template内 重点:给view添加ref="top"

第三步:添加渐变色样式

1、pages.json

bash 复制代码
{
  "path" : "pages/user/user",
    "style" :                                                                                    
    {
        "navigationBarTitleText": "我的",
		"navigationBarTextStyle":"black",//标题栏字体颜色
		"navigationBarBackgroundColor": "#1890FF",//标题栏背景色(纯色)
		"navigationStyle":"custom"//用户自定义(添加此处!!!!!)
    }            
}

第一种方法:样式添加渐变色

bash 复制代码
<view class="top" ref="top"></view>
bash 复制代码
.top{
   width: 100%;
   height: 200px;
   background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
   box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 
}

效果图:

第二种方法:用背景图

bash 复制代码
<view class="top" ref="top">
	<image mode="widthFix" class="top-img" src="@/static/img/bg.png"></image>
</view>
bash 复制代码
.top-img {
	display: block;
	width: 100%;
	height: 324rpx;
}

效果图:

相关推荐
LawsonJin1 小时前
springboot实现微信小程序支付(服务商和普通商户模式)
spring boot·后端·微信小程序
2501_915909061 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918411 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
從南走到北2 小时前
房屋出租出售预约系统
微信小程序·小程序
2501_9159214310 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_9159090613 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_9151063213 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159090613 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview