小程序自定义导航栏

小程序自定义导航栏🐤🐤

在这里插入图片描述

js

  data: {statusBarHeight: wx.getSystemInfoSync().statusBarHeight, // 状态栏高度navBarHeight: 44, // 导航栏高度},getSystemInfo() {//获取当前设备信息wx.getSystemInfo({success: res => {// 获取胶囊按钮信息let menuInfo = wx.getMenuButtonBoundingClientRect();// 计算导航栏高度let navBarHeight = menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2;this.setData({statusBarHeight,navBarHeight})}})},onLoad(options) {this.getSystemInfo()},

wxml

<view class="page-lucky" style="padding-top: {{statusBarHeight}}px;"><view class="nav-title" style=" height: {{navBarHeight}}px; line-height: {{navBarHeight}}px;"><image src="/static/detail/arrow-left.png" class="arrow-left" bindtap="back" mode="" /><text>首页</text></view>
</view>

scss

.page-lucky {background-color: #fff;display: flex;align-items: center;justify-content: center;.arrow-left {position: absolute;top: 50%;left: 32rpx;transform: translateY(-50%);text-align: left;width: 40rpx;height: 40rpx;}.nav-title {position: relative;text-align: center;width: 100vw;}
}

json

  "navigationStyle": "custom"

iOS 端(补充)

  • 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
  • 导航栏高度固定位44px;
  • 注意:iOS端导航栏高度44与小程序默认导航栏(“navgationStyle": "default”)保持一致,iOS端标题与胶囊按钮并不是垂直居中的,是偏靠下一点的,而Android端是垂直居中对齐的,如果iOS也想要上下居中的效果可以采用Android端的方案;

Android 端(补充)

  • 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
  • 根据胶囊的位置与高度计算出导航栏的高度,与Android端默认导航栏(“navigationStyle”: “default”)保持一致,并且Android端标题与胶囊是垂直居中对齐的

参考链接 | 图片及文字

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

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

相关文章

Linux下的Docker安装,以Ubuntu为例

Docker是一种流行的容器化平台&#xff0c;它能够简化应用程序的部署和管理。 Docker安装 1、检查卸载老版本Docker&#xff08;为保证安装正确&#xff0c;尽量在安装前先进行一次卸载&#xff09; apt-get remove docker docker-engine docker.io containerd runc 2、Dock…

【LeetCode热题100】--15.三数之和

15.三数之和 注意&#xff1a;最后答案中不能包含重复的三元组 使用排序双指针 可以使用三重循环枚举三元组&#xff0c;但是需要哈希表进行去重操作&#xff0c;得到不包含重复三元组的最终答案&#xff0c;消耗量大量的时间和空间 对于不重复的本质&#xff0c;保持三重循环…

malloc是如何实现内存分配的?

文章目录 前言一、malloc实现原理概括&#xff1f;二、brk() 函数与mmap()函数三、mmap实现原理普通读写与mmap对比mmap内存映射实现过程mmap 的适用场景 前言 在C和C中&#xff0c;malloc函数是用于动态分配内存的常用函数。本文将深入探究malloc函数的内存分配实现机制&…

javafx学习记录

1.布局 2.选择重写或实现方法&#xff08;select methods to override/implements&#xff09; ctrl o 3.javafx有init方法,start方法,stop方法 4.定义一个按钮,使用系统默认浏览器访问网站 5.使窗口的关闭栏,缩小扩屏栏,代码是倒数第二行 6.设置模态窗口,默认关闭模态的 下…

9.18号作业

完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两个按钮…

Gavin Wood 演讲全文:建设更具韧性以应变化的 Polkadot

我们非常激动能邀请到 Gavin Wood 博士来现场分享关于 Polkadot 的近况以及最新的进展&#xff0c;带来他对于《加密项目应该怎样应对当今世界的变化》的演讲分享。 &#x1f6a9;点击视频链接观看演讲实录&#xff1a;https://www.youtube.com/watch?vYw3mQNJ5UJQ&t1048s…

JWT 使用教程 授权 认证

JWT 1.什么是JWT JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally s…

JDBC基本概念

什么是JDBC JDBC概念 JDBC&#xff08;Java DataBase Connectivity&#xff09;是一套统一的基于Java语言的关系数据库编程接口规范。 该规范允许将SQL语句作为参数通过JDBC接口发送给远端数据库&#xff0c; …

4G模块驱动移植

一、4G模块概述 1、调试的模块型号是广和通的 NL668-EAU-00-M.2。 2、使用的接口是 M.2 Key-B。实际只用到了M2里的USB接口。 调试过程 以QMI_WWAN号方式进行说明&#xff0c;其他拨号方式也试过。最后以QMI_WWAN方式调通了&#xff0c;拨号成功了。 其他拨号方式因为现有文档…

练习敲代码速度

2023年9月18日&#xff0c;周一晚上 今晚不想学习&#xff0c;但又不想玩游戏&#xff0c;于是找了一些练习敲代码的网站来玩玩&#xff0c;顺便练习一下敲代码的速度 目录 参考资料个人推荐第一个 第二个第三个 参考资料 电脑打字慢&#xff0c;有哪些比较好的练打字软件&a…

界面控件DevExpress的VS报表设计器 v23.1——启动速度全面提升

本文主要介绍在DevExpress v23.1这个版本发布周期中对Visual Studio报表设计器所做的改进&#xff0c;包括优化的启动时间、新的全局选项对话框等。 屡获大奖的界面控件套包DevExpress 今年第一个重要版本v23.1正式发布&#xff0c;该版本拥有众多新产品和数十个具有高影响力的…

用无代码搭建数据中台,竟做到如此丝滑

文章目录 需求背景系统介绍配置说明1 菜单导航2 系统自带组件导入页面&#xff08;1&#xff09;数据集成相关组件&#xff08;2&#xff09;数据服务相关组件 3 由系统组件路径添加页面&#xff08;1&#xff09;数据资产管理&#xff08;2&#xff09;数据标准管理&#xff0…

Linux工具(一)

前言&#xff1a;Linux是一个开源的操作系统&#xff0c;它拥有庞大而活跃的开发社区&#xff0c;为用户提供了丰富多样的工具和应用程序。这些工具不仅适用于系统管理员和开发人员&#xff0c;也适用于普通用户&#xff0c;可以帮助他们完成各种任务&#xff0c;从简单的文件管…

题目 1057: 二级C语言-分段函数

有一个函数如下&#xff0c;写一程序&#xff0c;输入x&#xff0c;输出y值。 保留两位小数 样例输入 1 样例输出 1.00 这道题的思路很简单&#xff0c;我直接用if判断输入的X对应的函数Y的区间&#xff0c;代入对应的函数&#xff0c;求出结果。记得变量用浮点型&#xff…

亚马逊云科技面向游戏运营活动的AI生图解决方案

随着Stable Diffusion等AI生图方案逐步普及&#xff0c;越来越多的场景被开发和落地。其中面向游戏C端玩家的AI生图营销活动场景正在被逐步验证&#xff1a;在某个游戏社区中&#xff0c;玩家一键从手机上传一张照片&#xff0c;AI会将自动识别该照片中的元素并替换成游戏中相应…

今年嵌入式行情怎么样?

今年嵌入式行情怎么样&#xff1f; 嵌入式技术今年可以说是IT领域中最炙手可热的之一。随着中年危机和内卷问题的出现&#xff0c;越来越多的互联网从业者将目光投向了嵌入式领域。国内的嵌入式市场一直受终端需求变化的影响而波动&#xff0c;但随着国内产业自主化的发展趋势…

Python匿名函数

简单来说&#xff0c;匿名函数就是懒。 结构 函数名 lambda 参数 : 函数体 fun lambda x,y : x*y*y fun(3,5)优点 可以让写代码更“懒”一点

[S2] Challenge 25 心脏病预测

问题 您是一家医疗保健公司的数据科学家&#xff0c;试图创建患者是否患有心脏病的预测因子。目前&#xff0c;您正在试验 11 种不同的特征&#xff08;潜在心脏病指标&#xff09;和 XGBoost 分类模型&#xff0c;您注意到它的性能可能会根据其调整方式而发生很大变化。在此挑…

Docker的基本操作

Docker的基本操作 操作常见指令 # 推送镜像到服务 docker push # 从服务拉去镜像 docker pull # 构建镜像 docker build # 保存镜像为一个压缩包 docker save # 加载镜像 docker load镜像加载、删除等 拉取nginx docker pull nginx查看镜像 docker images # 只查看id doc…

thinkphp:查询本周中每天中日期的数据,查询今年中每个月的数据,查询近五年每年的总数据

一、查询本周中每天中日期的数据 结果&#xff1a; 以今天2023-09-14为例&#xff0c;这一周为2023-09-11~2023-09-07 代码 后端thinkphp: //查询本周每天的的总金额数 //获取本周的起始日期和结束日期 $weekStart date(Y-m-d, strtotime(this week Monday)); $weekEnd …