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

效果图:

相关推荐
中科三方8 分钟前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理2 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机4 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
xx24064 小时前
UniApp学习笔记
uni-app
上趣工作室5 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习6 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建7 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
七七小报8 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12548 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端9 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信