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

效果图:

相关推荐
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me9 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_233311 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷16 小时前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
Java陈序员17 小时前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
玩代码的菜鸟1 天前
uniapp类似抖音视频滑动
uni-app