.navbar-wrap { position: fixed; width: 100%; top: 0; z-index: 9999999; background-color: #3281FF; box-sizing: border-box; } .navbar-text { text-align: center; font-size: 36rpx; color: #fff; font-weight: 600; } .navbar-icon { position: fixed; display: flex; border-radius: 64rpx; border: 0.5px solid rgba(255,255,255, 0.3); box-sizing: border-box; } .navbar-icon image { height: 20px; width: 20px; padding: 5px 10px 10px; display: inline-block; overflow: hidden; } .navbar-icon view { height: 18px; border-left: 0.5px solid rgba(255,255,255, 0.3); margin-top: 6px; } .navbar-loading { background: #fff; text-align: center; }
引用组件页面代码
navigationStyle.json
{ "navigationStyle": "custom", "enablePullDownRefresh": true, "backgroundTextStyle": "light", "usingComponents": { "headerNavbar": "/components/headerNavbar/headerNavbar" } }
先在需要使用自定义导航栏的页面json中添加navigationStyle:custom
enablePullDownRefresh: true 开启下拉刷新
backgroundTextStyle: light是把loading的样式改成白色，这样就不会显示出来loading的三个点
navigationStyle.wxml
<headernavbar navbar-data="{{nvabarData}}"></headernavbar> <view> <text> 上面是自定义导航栏↑↑↑ </text> <text> 下面是主体内容↓↓↓ </text> <navigator url="./testPage"> 跳转到测试页 </navigator> </view>
navigationStyle.js
Page({ data: { // 组件所需的参数 nvabarData: { showCapsule: 1, // 是否显示左上角胶囊按钮 1 显示 0 不显示 title: '组件列表' // 导航栏 中间的标题 } }, onPullDownRefresh() { setTimeout(() = >{ wx.stopPullDownRefresh(); // 停止下拉 }, 2000); }, })
注意：虽说这么做在小程序开发工具中看起来都是对的，得到的导航栏高度也是64px但是在真机上测试后，还是有偏差，在iphone8 plus上高度是60px。
可以通过这张图明显看到差了几px，如果你是单独几个页面使用自定义导航，细心的用户可能会发现，但是基本不影响。如果是全局使用自定义导航，那就不存在这个问题了。
项目代码：https://github.com/Shay0921/header-navbar.git
总结
以上所述是小编给大家介绍的详解微信小程序胶囊按钮返回|首页自定义导航栏功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: