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;
}

效果图:

相关推荐
流着口水看上帝2 小时前
微信小程序技术架构图
微信小程序·小程序
别拿曾经看以后~2 小时前
原生Android调用uniapp项目中的方法
android·vue.js·uni-app
苹果电脑的鑫鑫2 小时前
微信小程序上传微信官方审核流程(1)
微信小程序·小程序
代码唐5 小时前
uniapp奇怪bug汇总
uni-app·bug
paterWang5 小时前
小程序-基于java+SpringBoot+Vue的农场管理系统设计与实现
java·spring boot·小程序
欧克生活5 小时前
漫步北京小程序+气象景观数字化服务平台,让气象景观触手可及
小程序
wqq_9922502775 小时前
springboot基于微信小程序的停车场管理系统
spring boot·后端·微信小程序
慕斯白狼5 小时前
微信小程序2-地图显示和地图标记
微信小程序·小程序·notepad++
尘浮生5 小时前
Java项目实战II基于Java+Spring Boot+MySQL的共享汽车管理系统(源码+数据库+文档)
java·数据库·spring boot·mysql·微信小程序·小程序·汽车