小程序自定义导航栏

最新推荐文章于 2025-05-26 11:23:29 发布

labu1_mei

最新推荐文章于 2025-05-26 11:23:29 发布

阅读量892

点赞数 1

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/labu1_mei/article/details/128431524

本文详细介绍了如何在微信小程序中自定义导航栏，包括在app.js设置全局样式，创建公共组件，编写nav.js、nav.wxml和nav.wxss文件，设置组件样式，并在页面中引入和使用该组件，最终实现定制导航栏效果。

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

1、在要自定义导航栏的组件json中设置，如果是全局在app.js中设置

"navigationStyle": "custom"

内容直接跑到最顶端

2、在根目录定义一个components文件夹，保存公共组件

3、新建一个nav文件夹，点击新建Component

4、下面是代码

nav.js:

// 获取右侧胶囊的盒子数据
/**
 * 组件的初始数据
 */
data: {
   meum: wx.getMenuButtonBoundingClientRect(),
},

nav.wxml:

<--上内边距设置为胶囊的上内边距，内容所需的高度再更换-->
<view style="padding-top:{{meum.top*2}}rpx; padding-bottom: 50rpx;" class="topView">
    <--此处书写自定义内容-->
    <--此处我将按钮的高设为胶囊的高，加上圆角-->
    <van-button icon="search" custom-class="topBtn" custom-style="height:{{meum.height*2}}rpx; border-radius: {{meum.height}}rpx;">搜索</van-button>
</view>

nav.wxss

.topView {
    padding-left: 50rpx;
    background-color: #5094f3 !important;
}
.topView .topBtn {
    width: 500rpx;
    border: none;
    background-color: rgb(255, 255, 255, .2);
    color: #fff;
}

5、导航栏组件书写完毕，引入组件

（1）要引入的页面json配置文件中引用：（必须用相对路径）

"usingComponents": {
        "nav": "/components/nav/nav"
    },

（2）页面中引入组件：

<nav></nav>
<text>内容</text>

6、最后的效果