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

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

基础标题栏

小程序标题栏主要包含返回、标题、收藏、菜单、收起 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标题颜色不一致]
  • [如何获取标题栏高度以及状态栏高度]
  • [小程序导航栏标题设置空后无法触发点击事件]

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧路灯杆如何实现雪天道路安全监测

随着北方区域连续发生暴雪、寒潮、大风等气象变化&#xff0c;北方多地产生暴雪和低温雨雪冰冻灾害风险&#xff0c;冬季雨雪天气深度影响人们出行生活&#xff0c;也持续增加道路交通风险。 智慧路灯杆是现代城市不可或缺的智能基础设施&#xff0c;凭借搭载智慧照明、环境监测…

深入解析Freemarker模板引擎及其在Spring Boot中的高级整合

目录 引言1. Freemarker1.1.什么是Freemarker1.2 Freemarker模板组成部分1.3.优点 2. Spring Boot整合Freemarker2.1 配置2.2 数据类型 3. 案例总结 引言 Freemarker作为一款强大的模板引擎&#xff0c;与Spring Boot的整合能够极大地提升Web应用的开发效率和灵活性。本篇博客…

Ubuntu22.04_修改用户名_添加用户_修改电脑名

概要&#xff1a; 本篇所讲述的操作都是在图形化界面中进行。点击顶部栏右侧&#xff0c;展开系统菜单&#xff0c;打开设置 一、修改自己的用户名 1、修改之前查看信息 cat /etc/passwd 2、修改 输入完成&#xff0c;回车即可 3、修改之后查看信息 cat /etc/passwd 4、解…

一分钟解决:vscode卡在“设置SSH主机:VS Code-正在本地下载 VS Code 服务器”

问题&#xff1a;vscode之前可正常使用&#xff0c;更新之后&#xff0c;连接服务器卡住了。 解决&#xff1a;从CMD或者你的终端连接服务器&#xff0c;进入vscode-server目录下&#xff0c;删除一些文件夹就行&#xff0c;然后使用vscode重新链接&#xff0c;它会自动下载新…

Linux访问MySQL数据库(包含实验案例)

1、访问MySQL数据库。 1.1、登录到MySQL服务器 经过安装后的初始化过程&#xff0c;MySQL数据库的默认管理员用户名为"root"&#xff0c;密码为空。 [rootyang ~]# mysql -u root //"-u"选项用于指定认证用户有密码的情况下&#xff0c;使用"-p&qu…

用23种设计模式打造一个cocos creator的游戏框架----(十五)策略模式

1、模式标准 模式名称&#xff1a;策略模式 模式分类&#xff1a;行为型 模式意图&#xff1a;定义一系列的算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可以相互替换。此模式使得算法可以独立于使用它们的客户而变化 结构图&#xff1a; 适用于&#xff1…

【期末复习向】常见的激活函数

激活函数是非线性的函数&#xff0c;使用它的原因就是因为线性函数无论叠加多少层&#xff0c;最终带来的变化都是线性的组合&#xff0c;一般也只能用于线性分类&#xff0c;如经典的多层感知机。但是如果加上非线性的变换&#xff0c;根据通用近似定理&#xff0c;就可使得神…

持续集成交付CICD:Jenkins使用GitLab共享库实现自动上传前后端项目Nexus制品

目录 一、实验 1.GitLab本地导入前后端项目 2.Jenkins新建前后端项目流水线 3.Sonarqube录入质量阈与质量配置 4.修改GitLab共享库代码 5.Jenkins手动构建前后端项目流水线 6.Nexus查看制品上传情况 7.优化代码获取RELEASE分支 8.优化Jenkins流水线项目名称 一、实验 …

Linux环境下maven的安装

到官网下载maven 步入下面的地址选择合适的maven版本 https://dlcdn.apache.org/maven/ 以笔者为例&#xff0c;选择了3.5.4这个版本 将maven上传到Linux服务器并解压 tar -zxvf apache-maven-3.5.4-bin.tar.gz配置环境变量 我们使用vim编辑profile vim /etc/profile环境…

基于Spring Boot、Mybatis、Redis和Layui的企业电子招投标系统源码实现与立项流程

招投标管理系统是一款适用于招标代理、政府采购、企业采购和工程交易等领域的企业级应用平台。该平台以项目为主线&#xff0c;从项目立项到项目归档&#xff0c;实现了全流程的高效沟通和协作。通过该平台&#xff0c;用户可以实时共享项目数据信息&#xff0c;实现规范化管理…

薅github的羊毛-用pages建自己的博客或静态资源站 - 1/2

注册帐号 准备邮箱注册帐号&#xff0c;在注册界面输入用户名、邮箱及密码完成注册。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 1. 在注册成过程中&#xff0c;会往邮箱发送验证码&#xff0c;请如实填写即可 2. 验证码没错的话&#xff0c;就代…

LLM Agent发展演进历史(观看metagpt视频笔记)

LLM相关的6篇重要的论文&#xff0c;其中4篇来自谷歌&#xff0c;2篇来自openai。技术路径演进大致是&#xff1a;SSL (Self-Supervised Learning) -> SFT (Supervised FineTune) IT (Instruction Tuning) -> RLHF。 word embedding的问题&#xff1a;新词如何处理&…

数据结构之Map/Set讲解+硬核源码剖析

&#x1f495;"活着是为了活着本身而活着"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;数据结构之Map/Set讲解硬核源码剖析 一.搜索树 1.概念 二叉搜索树又叫二叉排序树&#xff0c;他或者是一颗空树&#xff0c;或者是具有以下性质的树 若它…

Oracle md5

SQL CREATE OR REPLACE FUNCTION MD5(passwd IN VARCHAR2) RETURN VARCHAR2 ISretval varchar2(32); BEGINretval : utl_raw.cast_to_raw(DBMS_OBFUSCATION_TOOLKIT.MD5(INPUT_STRING > passwd));RETURN retval; END; 测试 select md5(lw112190) from dual 效果

Android Studio的代码笔记--Adapter+GridView学习

AdapterGridView学习 AdapterGridViewSimpleAdapterGridViewactivity_main.xmlappicon.xmlMainActivity 自定义BaseAdapterGridView已下载应用PackageInfoAppAdapterMainActivity2 其他获取已下载应用信息函数获取所有应用信息函数ImageView产生圆角的方法背景设置很渐变设置选…

Matter分析与安全验证

本文作者&#xff1a;杉木涂鸦智能安全实验室 什么是matter Matter是一项智能家居的开源标准&#xff0c;由连接标准联盟制定、认证、推广&#xff0c;该标准基于互联网协议&#xff08;IP&#xff09;&#xff0c;遵循该标准的智能家居设备、移动应用程序和云服务能够进行互…

three.js(一)

文章目录 three.js环境搭建正文补充 示例效果知识点补充1:一个标准的html知识点补充2:原生的前端框架和Vue框架的区别原生的前端框架Vue框架声明式编程和响应式编程 three.js环境搭建 正文 搭建 Three.js 的环境通常包括以下几个步骤&#xff1a; 1.创建项目目录&#xff1a…

Linux的基本指令和权限的知识

学前的建议&#xff1a;大家不要太关注指令是啥&#xff0c;记不住怎么办&#xff08;没事&#xff0c;想用时去查就好了&#xff09;&#xff0c;这篇文章重点部分是围绕指令的周边知识。毕竟指令是“死肌肉”&#xff0c;而一些关于Linux和操作系统的理论知识才是最重要滴&am…

懒惰的数独——lodash的shuffle方法实现随机打乱的效果

1.效果 2.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title><script src"https://cdn.jsdelivr.net/npm/vue2.5.17/dist/vue.js"></script><script src&q…

Unity_FairyGUI发布导入Unity编辑器资源报错

Unity_FairyGUI发布导入Unity编辑器资源报错 报错&#xff1a; FairyGUI: settings for Assets/UI/XMUI/XMSubway_atlas0.png is wrong! Correct values are: (Generate Mip Mapsunchecked) UnityEngine.Debug:LogWarning (object) FairyGUI.UIPackage:LoadAtlas (FairyGUI.P…
最新文章