微信小程序自定义导航栏navigationBar（搜索框）

最新推荐文章于 2024-06-08 14:27:41 发布
最新推荐文章于 2024-06-08 14:27:41 发布
阅读量1.2k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LIXIAONA_1101/article/details/114878021
本文介绍了如何在微信小程序中实现自定义导航栏，包括获取状态栏高度、菜单按钮高度，并根据平台差异设置导航栏高度。通过动态设置样式，创建包含搜索框的导航栏，并展示了相应的vue数据和wxml结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简摘：

app.vue的onLaunch()

    // 设置自定义导航start
            const {
                statusBarHeight,
                platform
            } = uni.getSystemInfoSync()
            const {
                top,
                height
            } = uni.getMenuButtonBoundingClientRect()

            // 状态栏高度
            uni.setStorageSync('statusBarHeight', statusBarHeight)
&nb

最低0.47元/天 解锁文章

200万优质内容无限畅学
小程序入门之自定义导航条和底部navigationBar的配置
xuanyuan_jia的博客
07-29 1206
小程序的自制导航条 很多小程序的导航条都是自己写的，拥有自己的风格。我在写小程序页面的时候发现了这个问题并且找了很多网上的文章，但是没找到满意的，文件的位置都不是很清楚，不适合小白写小程序的页面，所以我也写一篇，方便自己方便他人。 准备工作 工具：微信开发者工具 实现效果： 首先，桌面新建文件夹，然后通过微信开发者工具测试号打开文件夹。 一开始是这几个文件，红色的是我之前建的，觉得可以写文章记一下就没有重新做了。找到pages里面的两个文件index和log页，删除这两个文件。然后在pages里面新建一
UISearchBar在UINavigationBar上的实现以及UISearchDisplayController的使用
03-03
在UINavigationBar上显示UISearchBar， 并实现UISearchDisplayController功能的小Demo， 更多讲解在http://www.cnblogs.com/sely-ios/p/Sely.html
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 7471
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
微信小程序自定义头部导航navigationBar
weixin_44291886的博客
08-05 411
在开发过程中肯定有这样的需求 不想要原生系统的 导航 //app.js里面 // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); console.log(wx.getSystemInfoSync()) // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） *
uniapp微信小程序自定义顶部导航栏(搜索框)
weixin_64475163的博客
11-01 4356
有一个需求是：要自定义微信小程序自定义顶部导航栏。
微信小程序云开发之自定义顶部导航栏搜索框（非组件）
我们好像在哪见过
11-03 4333
隐藏原生navigationBar navigation-bar是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
03-29
今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，...
小程序实现搜索框
12-11
小程序中搜索框的简单实现，供大家参考，具体内容如下 搜索框 搜索框无论是在电商网站还是小程序中是很常见的，那么在小程序中是如何实现的呢，我们一起来看看吧（过程遇到很多问题）。 思路 在搜索框中输入关键词时，应该会向服务器发送请求，因为没有相关接口，所以我就模拟数据啦，用文档中API中的setStorage和getStorage在本地存储数据和读取数据，在搜索框中输入时若能匹配到则显示，若匹配不到，则显示“没有数据”。 模糊搜索 search.wxml <!--pages/search/search.wxml--> <input type='tex
微信小程序 导航navigation-bar
最新发布
weixin_62980497的博客
06-08 749
属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.9.0 loading boolean false 否 是否在导航条显示 loading 加载提示 2.9.0 front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持#ffffff和#000000 2.9.0 background-co
自定义微信小程序导航栏NavigationBar
@Yan*_*zeng博客
03-24 1049
NavigationBar
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
weianl的博客
01-02 2万+
最近在写商城，中途遇到了需要自定义修改导航栏的操作，大概是如下图接过样子的，于是想手写一份，但我发现右上分的分享按钮在不同设备离顶部的距离是不一样的，于是找了下官方程序员写的文档(点这里查看)，(⊙o⊙)…一脸懵逼咧，貌似不能满足这需求，而且后续也要实现点击导航滚动定位，组件传参麻烦，而且未必能实现，于是我把WeUI的navigation-bar组件的精华提取出来写了一份。 wxml文件 &lt...
微信小程序之实现页面顶部导航栏透明、隐藏效果（navigationBar）欢迎点赞收藏
热门推荐
XH_jing的博客
06-08 2万+
我们在开发微信小程序的过程中大家都知道，导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性，但是里面的颜色只能为纯色，不能使用 rgb 颜色，或者 rgba 的色号。 需求分析 但是有时候我们想要实现这种效果，想要让顶部的导航栏透明隐藏，这个时候就需要发动我们的小脑筋想一下要如何实现了。 我们可以看一下官网是否有此类方法：Navigation 官网说：Navigation是小程序的顶部导航组件，当页面配置 navigat
微信小程序自定义导航栏navBar组件
yangmin_kk的博客
12-11 1733
app.json里面window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。自定义需要配置为custom在需要使用自定义组件navBar的页面的json文件里面，设置navigationStyle为custom,并且引入组件。
微信小程序 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。
是江迪呀 的博客
08-09 2577
theme: smartblue highlight: a11y-dark 一、前言 我们在进行微信小程序开发时，常常需要自定义一些东西，比如自定义顶部导航、自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型，来给大家介绍下微信小程序如何获取自定义内容的位置信息。 二、开启自定义 如果需要自定义顶部和底...
微信小程序自定义navigationbar
qq_52624304的博客
10-26 1520
在开发过程中，遇到自定义navigationbar的问题，已解决，做记录用下面的代码的自定义navigationbar，效果为页面未滚动时，背景透明，无页面标题；页面滚动，背景颜色改变，页面标题出现。整体代码适用于与单个页面设置。
微信小程序自定义搜索导航栏
繁花已落的博客
05-11 6269
因为项目需要，要实现如京东类似的搜索 下图所示搜索框在导航栏中 按照正常的导航栏拆解来计算自定义导航栏的高度 从上图可以得到： 自定义导航栏 = 菜单按钮高度 + 状态栏高度 + 边距 * 2 然后翻看微信小程序API，找到相关的API- getMenuButtonBoundingClientRect 从 getMenuButtonBoundingClientRect 中可以得到 菜单按钮的...
微信小程序自定义导航栏实现全攻略
本文主要介绍了如何在微信小程序中自定义导航栏，并实现兼容适配所有机型的方法。通过隐藏默认导航栏，获取系统信息和胶囊按钮的相关数据，计算导航栏高度，编写新的导航栏样式，以及在页面中引用自定义导航栏。 在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值