记自定义微信小程序顶部导航栏

最新推荐文章于 2025-06-09 13:51:40 发布
原创 最新推荐文章于 2025-06-09 13:51:40 发布 · 453 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

有需求就要有解决方法

如何让自定义导航栏兼容所有机型，一定要拿到statusBarHeight(顶部的状态高度)，
怎么拿？
在这里插入图片描述

状态栏的高度：
在这里插入图片描述
在它的下面才能写我们自定义的导航栏，这样所有机型都适用，不会被挡住。

注意

  1. 在哪个页面自定义顶部导航栏，就要对应的自己再写一个，小胶囊会保留，返回按钮要自己加即wx.navigateBack({delta: 1})就行
  2. 最好用固定布局fixed不然有可能导航栏会随着页面进行滚动，这样不彳亍
  3. 用了自定义导航栏的页面，其返回的可用高度windowHeight是不包含状态栏高度的statusBarHeight一些地方是需要计算页面高度的

使用

在这里插入图片描述

效果

圈的这部分就是导航栏
在这里插入图片描述
还可以用图片，想要多高就给他多高
在这里插入图片描述

微信小程序自定义顶部导航栏
asd123asd098qwe的专栏
08-19 574
1.在components(没有就在根目录下创建一下)文件夹下创建navigation-bar组件。3.编写导航栏样式,navigation-bar.wmxl,navigation-bar.wxss。2.在navigation-bar.js下，动态设置导航栏的高度。5.在全局组件设置中设置导航栏组件，或者在需要的page页设置。4.在app.json中，设置顶部导航自定义模式。
自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）
周周池的博客
08-09 2846
在之前完成的小程序项目中，遇到微信顶部导航栏高度，在不同手高度不一样问题（不适配微信胶囊按钮）。总结了一下特发这篇文章整理思路 问题 一个前端，肯定不希望页面结构不好看。客户、老板、自己不满意啊 解决方法 通过uni.getSystemInfo获取系统信息（用来手机状态栏高度），因为状态栏的高度不同的手机是不一样的，状态栏如下 通过uni.getMenuButtonBoundingClientRect()获取微信小程序胶囊按钮的信息（top：胶囊按钮上边界坐标、height：胶囊按钮的高度） 通过w
微信小程序自定义顶部导航
on1yLX的博客
08-06 2351
1.全局顶部导航自定义，在app.json的“window”里添加"navigationStyle": "custom"2.只在某一个页面自定义顶部导航，在该页面的json文件里添加"navigationStyle": "custom"Navigation是小程序的顶部导航组件，当页面配置。的时候可以使用此组件替代原生导航栏。
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
热门推荐
一片天空
05-11 1万+
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
android studio 顶部导航栏_微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）...
weixin_39784460的博客
11-23 1384
本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。思路隐藏原生样式获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算出该机型的导...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
在微信小程序开发中，有时我们需要对默认的头部导航栏进行自定义，以满足特定的设计需求。本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 ...
微信小程序自定义导航栏实例代码
12-01
总之，自定义微信小程序的导航栏涉及多个步骤，包括权限控制、高度计算、内容定制、布局设计和事件处理。通过这些方法，开发者可以创建符合业务需求的导航栏，提升小程序的用户体验和视觉效果。在实践中，还应注意...
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
UniApp 自定义微信小程序 TabBar 导航栏
最新发布
小蜗牛的珍贵百宝箱
06-09 1743
在开发微信小程序时， 是一种常用的底部导航栏组件，它允许用户在不同的页面之间进行切换。UniApp 作为一个跨平台的开发框架，允许开发者使用相同的代码来编译生成多个平台（包括微信小程序、Android、iOS）的应用。UniApp 提供了对 的自定义功能，使开发者能够根据需求定制底部导航栏。本文将介绍如何在 UniApp 中自定义微信小程序的 导航栏，并展示代码实现。在 UniApp 中， 是通过在 文件中进行配置的。默认情况下，UniApp 提供了一个简单的 配置，你可以在该配置中修改 的颜色、
微信原生小程序自定义顶部导航
qq_45219069的博客
06-09 2752
都2023了，自定义顶部导航应该不是什么新鲜事了，这里只是简单记录下微信自己也提供了自定义顶部导航，大概看了下，可配置的也不少，所以看需求了，如果简单可以采用微信提供的，老规矩，先看效果。
小程序自定义头部导航栏
Argent_
07-03 1244
小程序配置 全局配置 设置之后默认的标题就没有了，要自定义标题的话在.wxml里写 推荐： 博客：https://blog.youkuaiyun.com/hangge0111/article/details/85232022 博客：https://www.jianshu.com/p/5753a0e1754f 博客：https://www.jianshu.com/p/7393c800ba09 ...
微信 小程序 自定义顶部导航栏
小花猫哒小栗子
01-14 710
一、在app.js中获取设备的参数 let menuButtonObject = wx.getMenuButtonBoundingClientRect(); console.log(menuButtonObject) wx.getSystemInfo({ success: res => { //导航高度 let statusBa...
微信小程序：自定义顶部导航栏
weixin_30599769的博客
05-07 457
一、在app.json的window对象中定义导航的样式： 小程序开发文档中说明 "window":{ "navigationStyle": "custom" }, 这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的，那就模仿小程序的导航栏按照以下步骤。 二、首先要在app.json的onLaunch方法里...
微信小程序 ---- 自定义顶部导航栏
qq_41709082的博客
11-09 1761
微信小程序 ---- 自定义顶部导航栏 需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。 方法作用： wx.getSystemInfoSync(): 获取 手机系统信息。 wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸，以及位置信息。 首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块： //app.js App({
学习日记-微信小程序自定义顶部导航栏
qq_44774424的博客
07-31 342
实现自定义顶部导航栏需要借助两个微信api let custom = wx.getMenuButtonBoundingClientRect(); 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 let { windowWidth } = wx.getSystemInfoSync() 获取设备信息 把代码贴下面了，希望能给一些小小小小小白们带来一些灵感吧 在app.js onLaunch中计算出顶部栏的位置 App({ onLaunch: function () { l
uniapp自定义微信小程序顶部导航栏
09-22
UniApp 是一个基于 Vue.js 的跨平台框架，它可以帮助开发者快速构建兼容微信小程序、H5、App（iOS 和 Android）的应用。如果你想在 UniApp 中自定义微信小程序的顶部导航栏，可以按照以下步骤操作： 1. **设置页面结构**： 在 `.vue` 文件中，你可以使用 `<template>` 标签来定义页面布局，包括顶部导航栏。通常，你会使用 `<uni-header>` 组件作为头部，它可以包含 `<uni-navbar>` 子组件。 ```html <template> <view class="page-container"> <uni-header fixed> <uni-navbar background-color="#fff" border-bottom-color="#e9e9e9"> <view class="nav-left"> <!-- 左侧按钮 --> <button @click="onLeftBtnClick">左箭头</button> </view> <view class="nav-center"> <!-- 主标题 --> <view class="title">{{ pageTitle }}</view> </view> <view class="nav-right"> <!-- 右侧按钮或菜单 --> <button @click="onRightBtnClick">右箭头</button> </view> </uni-navbar> </uni-header> <!-- 页面内容区 --> <view class="content"></view> </view> </template> ``` 2. **添加样式**： 需要在 CSS 或 SCSS 文件中对导航栏进行样式定制，例如颜色、字体等。确保将 `.nav-left`, `.title`, `.nav-right` 等选择器应用到对应的元素上。 3. **响应事件**： 在对应的 `.js` 或者 `methods` 中编写函数 `onLeftBtnClick` 和 `onRightBtnClick` 来处理按钮点击事件。 4. **动态调整**： 如果需要根据业务需求动态改变顶部导航栏，可以在适当的地方更新数据，然后通过视图层的响应式来渲染变化。 记得在项目启动前配置好 UniApp，并确保已经安装了相关的插件来支持微信小程序的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值