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

大体思路: 第一步:“navigationStyle”:“custom”
第二步: template内 重点:给view添加ref=“top”
第三步:添加渐变色样式

1、pages.json

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

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

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

效果图:
在这里插入图片描述
第二种方法:用背景图

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

效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/16272.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【玩转Linux】Linux输入子系统简介

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…

拯救者Y9000K无线Wi-Fi有时不稳定?该如何解决?

由于不同品牌路由器的性能差异&#xff0c;无法完美兼容最新的无线网卡技术&#xff0c;在连接网络时&#xff08;特别是网络负载较大的情况下&#xff09;&#xff0c;可能会出现Wi-Fi信号断开、无法网络无法访问、延迟突然变大的情况&#xff1b;可尝试下面方法进行调整。 1…

“深入理解SpringBoot:从入门到精通的几个关键要点“

标题&#xff1a;深入理解Spring Boot&#xff1a;从入门到精通 摘要&#xff1a;本文将深入探讨Spring Boot的关键要点&#xff0c;帮助读者从入门到精通。我们将从Spring Boot的基本概念开始&#xff0c;介绍自动配置、起步依赖、注解驱动开发等特性&#xff0c;并通过示例代…

ZooKeeper分布式锁、配置管理、服务发现在Java开发中的应用

ZooKeeper提供了多种功能&#xff0c;包括分布式锁、配置管理、服务发现、领导选举等。 下面是一些常见的ZooKeeper功能及其在Java中的应用示例代码。 分布式锁 import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch;pu…

前端小练-仿掘金导航栏

文章目录 前言项目结构导航实现创作中心移动小球消息提示 完整代码 前言 闲的&#xff0c;你信嘛&#xff0c;还得开发一个基本的门户社区网站&#xff0c;来给到Hlang,不然我怕说工作量不够。那么这个的话&#xff0c;其实也很好办&#xff0c;主要是这个门户网站的UI写起来麻…

pytest study

pytest 测试用例的识别与运行 测试文件&#xff1a;test_*.py 和 *_test.py 以test开头或结尾的文件 测试用例&#xff1a;Test*类包含的所有 test_*的方法&#xff08;测试类不能带有__init__方法&#xff09;&#xff0c; 不在class中的所有test_*的方法 def func(x):r…

web-文件上传和upload-labs靶场通关

目录 前端过滤 uploads-lab-1: 后端验证 upload-labs-2&#xff1a;mime验证 upload-labs-3&#xff1a;黑名单绕过 upload-labs-4&#xff1a;黑名单绕过-.htaccess(这里得用旧版的phpstudy&#xff0c;新版的不行) upload-labs-5&#xff1a;后缀名绕过 upload-labs-…

Android Ble蓝牙App(一)扫描

Ble蓝牙App&#xff08;一&#xff09;扫描 前言正文一、基本配置二、扫描准备三、扫描页面① 增加UI布局② 点击监听③ 扫描处理④ 广播处理 四、权限处理五、扫描结果① 列表适配器② 扫描结果处理③ 接收结果 六、源码 前言 关于低功耗的蓝牙介绍我已经做过很多了&#xff0…

FlinkSql维表join之Temporal table join

什么是维表join&#xff1f; 对于每条流式数据&#xff0c;可以关联一个外部维表数据源&#xff0c;为FlinkSql实时计算提供数据关联查询。 说明&#xff1a; 维表是一张不断变化的表&#xff0c;在维表JOIN时&#xff0c;需指明该条记录关联维表快照的时刻。维表JOIN仅支持对…

native webrtc支持切换音频采集设备和获取裸流

https://www.yuque.com/caokunchao/rtendq/oq8w3qgs3g59whru 前言 版本webrtc m96 1、修改webrtc m96代码&#xff0c;向外提供一个adm指针的接口出来 2、外部来获取指针进行设备的选择 3、外部获取音频裸流&#xff0c;麦克风或者扬声器的数据 修改webrtc代码 1、修改H:\w…

form-data 提交文件请求远程调用

文件请求方法 /*** 上传图文消息内的图片 获取url* 富文本内的图片** param file*/public static String uploadMediaGetUrl(File file) throws IOException {if (!file.exists()) {return null;}String responseData null;try {String url "http://localhost:8503/fil…

Linux NUMA架构(非统一内存访问)

NUMA架构 NUMA Architecture| Non Uniform Memory Access Policy/Model | Numa Node Configuration (CPU Affinity) NUMA架构产生的原因 cpu的高速处理功能和内存存储直接的速度会严重影响cpu的性能。传统的计算机单核架构,cpu通过内存总线(内存访问控制器)直接连接到一…

# Unity 如何获取Texture 的内存大小

Unity 如何获取Texture 的内存大小 在Unity中&#xff0c;要获取Texture的内存文件大小&#xff0c;可以使用UnityEditor.TextureUtil类中的一些函数。这些函数提供了获取存储内存大小和运行时内存大小的方法。由于UnityEditor.TextureUtil是一个内部类&#xff0c;我们需要使…

一些面试(笔试)题

1、请解释如下 cron6&#xff1a; * * * * * test -f /etc/dAppCluster/gethits.py && /etc/dAppCluster/gethitspy > /dev/null 2>&1 20 4 * * * test -d /data1/www/logs && /usr/bin/find /data1/www/logs -name *-error_log"-atime 7 -type…

分段@Transactional 坑及失效问题

Transactional 背景&#xff1a;在某些情况下&#xff0c;我们需要分段transaction&#xff0c;在最外面没有transaction&#xff0c;里面分成几个transaction&#xff0c;保证分段是成功的。 问题代码&#xff1a; Service public Order getOrder1(String id) {Optional<Or…

【笔记】流沙河讲庄子:心斋与坐忘

《庄子》这部书有三十三篇&#xff0c;这三十三篇&#xff0c;从魏晋南北朝起&#xff0c;经过唐代以后&#xff0c;历来研究者都把它分为三个部分&#xff1a;《内篇》《外篇》《杂篇》。所谓《内篇》&#xff0c;是指体现庄周的哲学思想和文化思想的核心部分&#xff1b;所谓…

MySQL~事务

二、事务 1、基本介绍 概念&#xff1a;如果一个包含多个步骤的业务操作&#xff0c;被事务管理&#xff0c;那么这些操作要么同时成功&#xff0c;要么同时失败。 2、操作&#xff1a; 开启事务&#xff1a; start transaction; 回滚&#xff1a;rollback; 提交&#xff…

全网最全讲的最详细的多线程原理

在我们开始讲多线程之前&#xff0c;我们先来了解一下什么是进程&#xff0c;什么是线程。进程和线程是操作系统中两个容易混淆的概念。 进程 在Windows操作系统中打开任务管理器&#xff0c;可以查看进程和线程的详细信息。也可以使用专业的进程查看小软件——Process Explo…

WebSocket

WebSocket详解 WebSocket是一种在单个 TCP 连接上进行全双工通信的协议&#xff0c;它允许客户端和服务器之间进行实时数据交换。与传统的HTTP请求相比&#xff0c;WebSocket具有更低的延迟和更高的并发性&#xff0c;适用于实时通信场景&#xff0c;如即时聊天、实时游戏、实…

javascript实现几何粒子星空连线背景效果

javascript实现几何粒子星空连线背景效果 <html><head><meta charset"UTF-8"><title>几何星空连线背景</title><script src"./ParticleBackground.js"></script> </head><body><canvas id"…