微信原生小程序自定义顶部导航

news2024/12/26 23:23:39

都2023了,自定义顶部导航应该不是什么新鲜事了,这里只是简单记录下
微信自己也提供了自定义顶部导航navigation-bar,大概看了下,可配置的也不少,所以看需求了,如果简单可以采用微信提供的,老规矩,先看效果
在这里插入图片描述

1、补充几个前置知识

  1. 状态栏高度(getSystemInfoSync),就是手机顶部网络那块的高度
  2. 胶囊位置信息(getMenuButtonBoundingClientRect),右边那个像胶囊一样的东西,通过它我们可以知道高度,计算出右边的padding
    在这里插入图片描述
    综上可知,整导航栏的高度其实是 1 所在区域 = 状态栏高度 + 胶囊高度 + ( 胶囊距离顶部 - 状态栏高度 ) * 2

因为,胶囊和状态栏之间还有一定间隙,所以完整的高度需要 胶囊距离顶部 - 状态栏高度

2、实现

首先需要知道上面说的那几个位置信息,思路分析

  1. 通常这些信息在小程序启动的时候获取一次就行了,所以我们需要做两手准备,如果全局里面没有,则导航组件再自己获取一次
  2. 如果没有获取到,应该有默认值(这时候样式肯定有不好看,不过没办法~)
  3. 顶部一般是定位固定的,所以用了导航组件后,应该有一个盒子用于占位补充定位导致塌陷的高度

3、完整代码如下

js如下

// component/navBar/navBar.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: ''
    },
    // 是否需要返回
    hasBack: {
      type: Boolean,
      value: false
    },
    // 背景色
    bgc: {
      type: String,
      value: 'linear-gradient(to top, #96fbc4 0%, #f9f586 100%)'
    },
    // 是否固定
    isFixed: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navInfo: {
      paddingLeft: 0, 
      paddingTop: 0,
      navHeight: 0 
    },
  },
  /**
   * 生命周期钩子
   * **/ 
  lifetimes: {
    created() {
      const { getSystemInfoSync, menuInfo} = app.globalData
      if(!Object.keys(getSystemInfoSync).length || !Object.keys(menuInfo).length) {
        console.warn('没有胶囊位置信息,重新获取中')
        this.customNavBarInfo()
      }
    },
    attached() {
      // 计算导航高度信息
      this.getNavBarInfo()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 计算导航高度信息
     * **/ 
    getNavBarInfo() {
      // 防止没有获取到位置信息
      let navInfo = {
        paddingLeft: 7, // 默认胶囊距离屏幕右边的距离
        paddingTop: 20,// 默认
        navHeight: 44 // 默认导航栏高度
      }
      if(Object.keys(app.globalData.menuInfo).length && Object.keys(app.globalData.getSystemInfoSync).length) {
        const { top,height,right,width } = app.globalData.menuInfo
        const { statusBarHeight,windowWidth } = app.globalData.getSystemInfoSync
        navInfo = {
          paddingLeft: windowWidth - right, 
          paddingTop: statusBarHeight,
          navHeight: height + ( top - statusBarHeight ) * 2,
          menuWidth: width
        }
      }
      this.setData({
        navInfo
      })
    },
    /**
     * 获取胶囊位置信息
     * **/ 
    customNavBarInfo() {
      app.globalData.menuInfo = wx.getMenuButtonBoundingClientRect()
      app.globalData.getSystemInfoSync = wx.getSystemInfoSync()
    },
  }
})

css如下

.nav{
  display: flex;
  align-items: center;
}
// 这是笔者写一个宽度,需要根据自己情况调整
.left{
  width: 80rpx;
}
.custom-nav{
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
}

通常在app.js里面提前获取一次

App({
  onLaunch() {
    this.globalData.menuInfo = wx.getMenuButtonBoundingClientRect() || {}
    this.globalData.getSystemInfoSync = wx.getSystemInfoSync() || {}
  },
  globalData: {
    // 完整胶囊信息
    menuInfo: {},
    // 完整系统信息
    getSystemInfoSync: {},
  }
})

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

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

相关文章

【Mysql】安装和基础环境配置

本文首发于 慕雪的寒舍 在本地安装mysql,以mariadb为例。 所有命令都需要在root下面执行or使用sudo 系统 CentOS 8 1.安装mariadb开发包 yum install -y mariadb yum install -y mariadb-server yum install -y mariadb-devel2.修改配置文件中的编码 为了保证对…

亚马逊美国站 儿童陀螺玩具CPC认证 陀螺的详细介绍 CPC认证方案的流程

什么是陀螺陀螺指的是绕一个支点高速转动的刚体。陀螺是中国民间最早的娱乐工具之一.形状上半部分为圆形,下方尖锐。从前多用木头制成,现代多为塑料或铁制。玩时可用绳子缠绕,用力抽绳,使直立旋转。或利用发条的弹力旋转。传统古陀…

多通道高通量实时处理单元详细方案设计报告

前端时间,做了一个项目,编写了相关的技术方案设计报告,项目的技术细节虽不能透漏,但这个设计报告做的很好,在此,贡献出来,给有相关需求的同事们做个参考,整个报告84页,2万…

JMeter 测试笔记(二):组件及运行原理

说组件之前,我们先来看一下JMeter的结构图,如下图,把JMeter拆解为三个维度,X空间5个维度,Y空间2个维度,Z空间1个维度。 介绍 X1~X5是负载模拟的整个过程,Y1是负载模拟部分,这部分主…

数字签名和数字证书的原理解读(图文)

数字签名和数字证书的区别是什么?数字证书是由权威机构CA证书授权中心发行的,能提供在Internet上进行身份验证的一种权威性电子文档。而数字签名是一种类似写在纸上的普通的物理签名,但是使用了公钥加密领域的技术实现,用于鉴别数…

类型检查:时常被忽略的编译器组件

原文来自微信公众号“编程语言Lab”:类型检查:时常被忽略的编译器组件 搜索关注“编程语言Lab”公众号(HW-PLLab)获取更多技术内容! 欢迎加入 编程语言社区 SIG-类型系统 参与交流讨论(加入方式&#xff1a…

【基于容器的部署、扩展和管理】3.3 自动化扩展和负载均衡

往期回顾: 第一章:【云原生概念和技术】 第二章:【容器化应用程序设计和开发】 第三章:【3.1 容器编排系统和Kubernetes集群的构建】 第三章:【3.2 基于容器的应用程序部署和升级】 自动化扩展和负载均衡 3.3 自动…

ChatGPT 使用 拓展资料:吴恩达大咖 Building Systems with the ChatGPT API 系统评估2

ChatGPT 使用 拓展资料:吴恩达大咖 Building Systems with the ChatGPT API 系统评估2 运行端到端系统以回答用户查询 import time customer_msg = f""" tell me about the smartx pro phone and the fotosnap camera, the dslr one. Also, what TVs or TV r…

HOOPS助力AVEVA数字化转型:支持多种3D模型格式转换!

行业: 电力和公用事业、化工、造船、能源、采矿业 挑战: 创建大规模复杂资产的客户需要汇集多种类型的数据,以支持初始设计和创建强大的数字双胞胎;现有版本的产品只支持半打CAD格式;有限的内部开发资源限制了增加对新…

SpringBoot:SpringBoot配置解读 ③

一、先讲思想 ①. 我们说SpringBoot方向是一直致力于快速应用开发领域的蓬勃发展。 ②. 应用层面: 简化配置,默认配置,约定配置是它的具体体现。 二、YML配置 ①. 这是一种层级结构更清晰的一种配置文件格式。 三、启动依赖配置树 官网的启…

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

1.引入 概述 音频文件或视频文件都可以看做是一个容器文件(类似于压缩的zip) 编解码器就是读取特定的容器格式,对其中的音频与视频轨进行解码,然后实现播放 解码器 解码器(decoder),是一种…

C++ 泛型编程 类型萃取器的运用

C 泛型编程 类型萃取器的运用 一、C类型萃取器的基本概念与应用(Type Traits in C)1.1 类型萃取器的定义与作用(Definition and Role of Type Traits)1.2 类型萃取器的分类与特性(Classification and Characteristics …

机器学习极简介绍(二)

人工智能AI 与 机器学习 人工智能、机器学习和深度学习是什么关系? 对于小白来说这些个概念总是混淆,人工智能 ≠ 机器学习,人工智能是更广泛的概念,它包括了所有使计算机系统具备智能行为和能力的技术和方法。机器学习是人工智…

postgres篇---docker安装postgres,python连接postgres数据库

postgres篇---docker安装postgres,python连接postgres数据库 一、docker安装postgres1.1 安装Docker:1.2 从Docker Hub获取PostgreSQL镜像1.3 创建PostgreSQL容器1.4 访问PostgreSQL 二. python连接postgres数据库2.1 connect连接2.2 cursor2.3 excute执…

ubuntu22.04下用opencv4.5.4访问照片、视频、摄像头

本文主要记录近期在学习opencv使用过程中的一些细节 前言:ubuntu22.04 OpenCV4.6.0(c)环境配置 opencv的安装过程可参考下面博文,亲测有效(容易出现问题的地方在安装下面依赖的时候,一般会出现报错,需要自己换源&…

让你不再疑惑音频如何转文字

随着科技的不断发展,我们现在可以通过各种智能设备来轻松地录制音频。但是,当我们需要将音频中的内容转换成文字时,该怎么办呢?这时候,转换工具就派上用场了!那么你知道音频怎么转文字吗?接下来…

CSS2学习笔记

一、CSS基础 1.CSS简介 CSS 的全称为:层叠样式表 ( Cascading Style Sheets ) 。CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等。简单理解: CSS 可以美化 HTML , 让 HTML 更漂亮…

【产品经理】成熟产品狗必备特质

在自己从事产品经理这个职位的3年间,看过不少产品经理成长相关的文章书籍,涵盖了挺多经验、素质、能力,平时工作中也会注意学以致用,所以每每回顾此事,都觉得这对自己的工作、个人成长起到了莫大的推进作用。 1、外部合…

Docker是什么、有什么用的介绍

文章目录 1.背景2. Docker 是什么?3.Docker 容器与虚拟机的区别4.Docker 的 6 大优势1、更高效地利用系统资源2、更快的启动时间3、一致的运行环境4、持续交付和部署5、更轻松迁移6、更轻松的维护和拓展 小结 知识搬运工: 原文出自: 原文链接…

网络渗透技术如何自学,自学黑客要多久

学习网络渗透技术是一件靠兴趣驱动的事情,只有强烈热爱一件事才能持之以恒的去做,对于那些三分钟热度的人来说还是劝你放弃吧,因为网络渗透技术自学需要很多方面的知识,没耐心是无法学会的,当然除了有想要学习的决心之…