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

效果图:

相关推荐
疯狂的沙粒10 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
chaosama24 分钟前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww1 小时前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
ALLSectorSorft3 小时前
上门服务小程序会员系统框架设计
小程序·apache
anyup3 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
甜甜的资料库5 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
说私域11 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
人工智能·小程序·开源·零售
alphaair11 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran575312 小时前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem21 小时前
从零搭建uniapp项目
前端·vue.js·uni-app