小程序顶部自定义导航栏，让自己的小程序导航栏不再单一

前言

关于小程序的导航栏，大多数人都只知道可以改变其背景颜色，标题内容等，但它的功能不止如此，你可以自定义成你想要的样式

---

此篇文章是基于QQ小程序的设置其自定义的导航栏（原理其实和微信小程序的差不多）

1.设置页面配置项列表

如果你想要小程序的全部页面都有自定义的导航栏，那你就在app.json进行全局设置。我是在部分页面设置的，所以直接在想要应用的页面的json文件进行设置即可。

"navigationStyle": "custom"

2.写自定义导航栏组件

由于我设置的不是全局的自定义导航栏，而是想要在特定的页面进行设置导航栏，所以写自定义组件以及将其应用是比较便携且可以提高代码的重复利用率。

//navBar.qml
<view class="navbarbox">
<image class="home-bg-nav" src="/images/home_bg_nav.png" mode="widthFix" style="position:fixed;top:0;z-index:800" />
<image class="navbarbox-logo" src="/images/logo_cece.png"  mode="aspectFill" style="position:fixed;top:20;z-index:900"/>
</view>
<image class="navbarbox-bg" src="/images/home_bg.jpg" mode="widthFix" />

//navBar.qss
.navbarbox {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.navbarbox-logo{
  position: absolute;
  top: 64rpx;
  left: 40rpx;
  width: 120rpx;
  height: 60rpx;

}

.navbarbox-bg{
  width: 100%;
  position: absolute;
  z-index: -1;
}
.home-bg-nav{
  width: 100%;
  position: absolute;
  z-index: -1;
  position: fixed;
}

!注意要在json文件设置"component":true

//navBar.json
{
    "compenent":true,
    "usingComponents":{}
  }

3.应用自定义导航栏组件

在需要应用自定义导航栏的页面（我这里是index页面）引入使用组件

//index.json
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navBar": "/components/navBar/navBar"
  }
}

//index.qml
<navBar></navBar>

效果图

总结

1.设置页面配置项列表 2.写自定义组件 3.应用自定义组件

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！

下一篇预告：如何获取时间对象并转换为特定格式：例如周一，周二…