当前位置: 首页 > news >正文

小程序开发实战案例四 | 小程序标题栏如何设置

上一期我们了解了 小程序底部导航栏 的实现效果,今天一起来了解下如何设置小程序标题栏~

基础标题栏

小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块,其中能够调整的部分只有标题和背景色。

另外 IDE上无法展示收藏按钮,如果测试收藏按钮的相关功能 需要使用真机模式调试

 

1、基础属性

📌 我们可以在 app.json 中标题栏的基础属性进行设置,常用的属性如下:

  • defaultTitle :页面标题
  • titleBarColor :导航栏背景色
  • titleImage :图片标题

app.json(对所有页面生效)

这里分别举例说明「文字标题」和「图片标题」对应的效果:

"window": {"defaultTitle": "购物商城","titleBarColor":"#ff4343","titleImage":"https://img2.baidu.com/it/u=417873769,1232851485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},

文字标题效果:

图片标题效果:

注意:

  • titleImage 优先级 > defaultTitle
  • 如果在页面的 json 文件中配置,仅对当前页面生效
  • 页面配置优先级 > app.json
  • 当前页面导航栏背景色无设置的情况下会沿用上级页面的配置

关于导航栏标题配置可能遇到的问题可以参考下面的文档:

  • [配置导航栏图片地址]
  • [修改顶部导航栏背景色]
  • [小程序标题如何在标题栏居中显示]
  • [如何设置导航栏背景渐变色]
  • [蒙层能否遮住小程序导航栏和 tabBar]

2、动态样式修改

如果需要对标题的样式进行动态修改,可以通过 my.setNavigationBar 方法实现:

// 设置导航栏前景色。注:frontColor 需要和 backgroundColor 一起设置
my.setNavigationBar({frontColor: '#ffffff',backgroundColor: '#ff0000',
})
// 设置导航栏标题
my.setNavigationBar({title: '当前标题'
})
// 重置导航栏颜色为默认配色
my.setNavigationBar({reset: true
})

另外,要注意的是,如果跳转到非 tab /首页的情况且页面栈深度为 1,页面上会出现 home 图标,如下图:

此时我们可以使用 my.hideBackHome 方法进行隐藏

Page({onShow() {if(getCurrentPages().length == 1){//判断页面栈深度my.hideBackHome();}},
});

📖 小贴士:

  • 建议在页面 onShow 时调用该方法,避免有闪烁或不生效。
  • 除了 home 图标外,其他的按钮都无法隐藏/去除。

这边汇总了一些关于动态样式修改的问题:

  • [返回按钮是否可隐藏]
  • [导航栏如何设置前景色,返回按钮颜色和标题颜色]

自定义标题栏

因为基础标题很多的属性都无法修改,如果需要标题居中、设置搜索框等操作的话,就需要用到自定义标题栏了。

1、属性配置

首先,自定义标题栏需要在对应页面的 .json 文件中配置以下属性:

  • transparentTitle:标题栏透明设置,支持设置 none / always / auto
  • titlePenetrate:是否允许标题栏点击穿透点击后方元素
"window": {"defaultTitle": "购物商城","transparentTitle":"always","titlePenetrate":"YES"}

none 效果:

always 效果:

auto 效果:向下拉时会逐渐透明

2、编写自定义标题栏代码

透明设置完成后,为了不跟返回按钮以及胶囊的位置冲突,我们需要获取到对应的位置信息,根据位置来确定自定义的模块的位置。

主要是获取标题栏(titleBarHeight)、状态栏(statusBarHeight)以及返回按钮右边的距离(right)。

获取标题栏位置:

Page({data: {titleBarHeight: 0,//标题栏高度statusBarHeight: 0,//状态栏高度right: 0,//返回按钮右边距离},onLoad(options) {const {titleBarHeight,statusBarHeight,} = my.getSystemInfoSync();this.setData({titleBarHeight,statusBarHeight,  });const{backButtonIcon,} = my.getLeftButtonsBoundingClientRect();this.setData({right:backButtonIcon.right});},//点击手机标题栏触发的事件,需要在 index.json 配置 titlePenetrate:"YES"onTitleBar(e) {my.alert({title: '点击了标题栏'});}
});

在 style 中设置自定义标题栏高度:

需要注意的是,只能在 style 进行动态配置,.css文件不支持动态配置。

<view class="custom-nav" style="height:{{titleBarHeight + statusBarHeight}}px"><view class="custom-titleBar" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px;padding-left:{{right}}px"onTap="onTitleBar" >hi,我是自定义标题~</view>
</view>

.acss 代码:

.custom-nav {background-image: linear-gradient(to bottom, #BC3985, #D15B2C);
}.custom-titleBar {display: flex;align-items: center;color: white;font-size: 16px;margin-left: 16px;
}

实现效果:

自定义导航栏的常见问题汇总在这里了,大家可以参考下~:

  • [导航栏设置透明后iOS和Android标题颜色不一致]
  • [如何获取标题栏高度以及状态栏高度]
  • [小程序导航栏标题设置空后无法触发点击事件]

以上就是关于【小程序标题栏设置】的所有内容了,希望对你有所帮助*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。

相关文章:

小程序开发实战案例四 | 小程序标题栏如何设置

上一期我们了解了 小程序底部导航栏 的实现效果&#xff0c;今天一起来了解下如何设置小程序标题栏&#xff5e; 基础标题栏 小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块&#xff0c;其中能够调整的部分只有标题和背景色。 另外 IDE上无法展示收藏按钮&#…...

Flutter在Visual Studio Code上首次创建运行应用

一、创建Flutter应用 1、前提条件 安装Visual Studio Code并配置好运行环境 2、开始创建Flutter应用 1)、打开Visual Studio Code 2)、打开 View > Command Palette。 3)、在搜索框中输入“flutter”&#xff0c;弹出内容如下图所示&#xff0c;选择“ Flutter: New Pr…...

如何用ChatGPT分析恶意软件?

自从我们进入数字化时代以来&#xff0c;恶意软件就一直是计算机应用系统的“心腹大患”。事实上&#xff0c;每一次技术进步都会为恶意行为者提供更多的工具&#xff0c;使得他们的攻击行为更具破坏性。不过&#xff0c;如今生成式人工智能的崛起&#xff0c;似乎让一直以来的…...

【Axure高保真原型】能增删改的树形表格

今天和大家分享能增删改的树形表格的原型模板&#xff0c;包括展开、折叠、增加、修改、删除表格内容&#xff0c;那这个原型模板是通过中继器制作的&#xff0c;所以使用简单&#xff0c;只需要填写中继器表格&#xff0c;即可自动生成对应的树形表格。这个模板最高支持6级树形…...

前端打包工具之Webpack5

前端打包工具之Webpack5 什么是打包工具打包工具的作用常见的打包工具一、Webpack1、什么是[webpack](https://webpack.docschina.org/concepts/)2、webpack本身的功能是有限的3、webpack基本使用&#xff1a;基于本身功能只解析JS资源4、webpack配置4.1、entry&#xff08;入口…...

linux设置环境变量

linux设置环境变量 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Linux设置环境变量&#xff1a;打造个性化开发环境 在Linux系统中&#xff0c;环境变量是一项…...

vue中对pdf文件和路径的处理

根据url预览pdf文件 地址栏输入url可以直接预览的pdf&#xff0c;这种我们可以直接使用vue-pdf进行预览 <div class"animation-box-pdf"><pdf :src"url" /></div><script> import Pdf from vue-pdfexport default {components: …...

Socks5与代理IP技术探析:构建安全高效的网络通信

1. Socks5协议的技术内幕 1.1 握手与身份验证 Socks5协议的握手阶段通过版本协商和灵活的身份验证方式建立安全连接。这确保了通信的可靠性和用户身份的安全。 1.2 数据传输机制 Socks5通过代理实现数据传输&#xff0c;支持TCP和UDP协议&#xff0c;为用户提供了高度灵活的…...

【lesson13】MySQL表的基本操作之create(创建),update(更新)和replace(替换)

文章目录 表的增删查改create测试建表基础测试 update测试建表基础测试 replace&#xff08;替换&#xff09;测试建表基础测试 表的增删查改 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; create 测试 建表…...

SQL进阶 | HAVING子句

概述 “HAVING”其用法和含义与“WHERE”关键词相似&#xff0c;但具有更高级别的限定性。在SELECT语句中&#xff0c;“HAVING”关键词用于过滤聚合函数的结果。与“WHERE”关键词不同的是&#xff0c;“HAVING”关键词不能用于过滤单个行&#xff0c;它主要用于过滤由GROUP B…...

【Marp】基于Markdown-Marp快速制作PPT

【Marp】基于Markdown-Marp快速制作PPT 文章目录 【Marp】基于Markdown-Marp快速制作PPT零、参考资料一、Marp基本语法&#xff08;创建分页&#xff0c;排版图片&#xff0c;更换主题&#xff0c;Marp扩展指令修改样式&#xff09;1、创建新的PPT页面2、插入图片 & 排版图…...

微服务项目部署

启动rabbitmq \RabbitMQ\rabbitmq_server-3.8.2\sbin 找到你的安装路径 找到\sbin路径下执行这些命令即可 rabbitmqctl status //查看当前状态 rabbitmq-plugins enable rabbitmq_management //开启Web插件 rabbitmq-server start //启动服务 rabbitmq-server stop //停止服务…...

vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置

1.viteTSVue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Select a variant:>>Typescrit2. 修改vite基本配置 配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn) vite.config.ts import { defineConfig } from vite …...

【rabbitMQ】模拟work queue,实现单个队列绑定多个消费者

上一篇&#xff1a; springboot整合rabbitMQ模拟简单收发消息 https://blog.csdn.net/m0_67930426/article/details/134904766?spm1001.2014.3001.5502 在这篇文章的基础上进行操作 基本思路&#xff1a; 1.在rabbitMQ控制台创建一个新的队列 2.在publisher服务中定义一个…...

pdf转png的两种方法

背景:pdf在一般公司,没有办公系统,又不是word/wps/Office系统,读不出来,识别不了,只能将其转化为图片png,因此在小公司或者一般公司就需要pdf转png的功能。本文将详细展开。 1、fitz库(也就是PyMuPDF) 直接pip安装PyMuPDF即可使用,直接使用fitz操作,无需其他库。 …...

【起草】1-2 讨论 ChatGPT 在自然语言处理领域的重要性和应用价值

【小结&#xff1a;ChatGPT 在自然语言处理领域的八种典型应用】 ChatGPT是一种基于Transformer模型的端到端生成式对话系统&#xff0c;采用自监督学习的方式ChatGPT是一种基于Transformer模型的端到端生成式对话系统&#xff0c;采用自监督学习的方式在海量无标注数据集上进…...

Mapreduce小试牛刀(1)

1.与hdfs一样&#xff0c;mapreduce基于hadoop框架&#xff0c;所以我们首先要启动hadoop服务器 --------------------------------------------------------------------------------------------------------------------------------- 2.修改hadoop-env.sh位置JAVA_HOME配…...

二百一十七、Flume——Flume拓扑结构之聚合的开发案例(亲测,附截图)

一、目的 对于Flume的聚合拓扑结构&#xff0c;进行一个开发测试 二、聚合 &#xff08;一&#xff09;结构含义 这种模式是我们最常见的&#xff0c;也非常实用。日常web应用通常分布在上百个服务器&#xff0c;大者甚至上千个、上万个服务器产生的日志&#xff0c;处理起来…...

vue3+ts+vite+element plus 实现table勾选、点击单行都能实现多选

需求&#xff1a;table的多选栏太小&#xff0c;点击的时候要瞄着点&#xff0c;不然选不上&#xff0c;要求实现点击单行实现勾选 <ElTableborder:data"tableDataD"style"width: 100%"max-height"500"ref"multipleTableRef"selec…...

在WPF窗口中增加水印效果

** 原理&#xff1a; ** 以Canvas作为水印显示载体&#xff0c;在Canvas中创建若干个TextBlock控件用来显示水印文案&#xff0c;如下图所示 然后以每一个TextBlock的左上角为中心旋转-30&#xff0c;最终效果会是如图红线所示&#xff1a; 为了达到第一行旋转后刚好与窗口…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...