![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3275d9127c81e4cb34cd806cb8fb1840.png)
- 最近遇到了项目需要自定义navbar,下面来介绍下具体的步骤
- 在当前页面的.json文件里进行配置(如果在全局的.json文件中配置的,则所有的页面中小程序自带的navbar样式都没有了)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/46b03b050b695dc113f7d61fb767b5d7.png)
"navigationStyle": "custom"
- 定义一个组件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/13d3dd63257e594c48631808960a76e0.png)
- app.js
- 获取胶囊的位置信息
App({
globalData: {},
onLaunch: function () {
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
console.log('menuButtonObject',menuButtonObject)
wx.getSystemInfo({
success: res=> {
console.log('res',res)
let statusBarHeight = res.statusBarHeight
let navTop = menuButtonObject.top
let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.windowHeight = res.windowHeight;
this.globalData.navRight = res.windowWidth-menuButtonObject.right;
this.globalData.capsuleHeight=menuButtonObject.height
}
})
}
})
<view class="navbar" style='height:{{navHeight}}px'>
<view class="icon navbar-action-group " style='left:{{navRight}}px;top:{{navTop}}px;height:{{capsuleHeight}}px;line-height:{{capsuleHeight}}px'>
<view class="navImg navbar-action_item border">
<image src="../../status/image/home.png" class="image"></image>
</view>
<view class="navImg navbar-action_item">
<image src="../../status/image/home.png" class="image"></image>
</view>
</view>
<view class="navbar-title" style='top:{{navTop}}px'>导航栏</view>
</view>
.navbar{
position: fixed;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
}
.icon{
position: absolute;
text-align: center;
display: flex;
padding: 0 10px;
}
.navbar-action-group {
border: 1px solid #f0f0f0;
border-radius: 20px;
}
.navbar-action-wrap{
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: absolute;
left: 10px;
z-index: 11;
line-height: 1;
padding-top: 4px;
padding-bottom: 4px;
}
.navImg{
width: 15px;
height: auto;
}
.navImg image{
width: 100%;
height: 15px;
}
.navbar-action_item {
padding: 0px 8px;
color: #333;
}
.border{
border-right: 1px solid #f0f0f0;
}
image{
display: inline-block;
overflow: hidden
}
.navbar-title {
width: 100%;
box-sizing: border-box;
padding-left: 115px;
padding-right: 115px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
left: 0;
z-index: 10;
color: #333;
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
var App = getApp();
Component({
properties: {
},
data: {
navHeight:'',
navTop:'',
navRight:'',
capsuleHeight:'',
navIcon:''
},
lifetimes: {
attached: function() {
this.setData({
navHeight: App.globalData.navHeight,
navTop: App.globalData.navTop,
navRight:App.globalData.navRight,
capsuleHeight:App.globalData.capsuleHeight
});
console.log('navHeight',this.data.navHeight)
console.log('navRight',this.data.navRight)
},
},
methods: {
}
})
<nav-bar></nav-bar>
<view class="container" style='margin-top:{{navHeight}}px'>
1111111111111111
<view class="home"></view>
</view>
.home{
height: 1500rpx;
width: 100%;
box-sizing: border-box;
}
const app = getApp()
Page({
data: {
navHeight:app.globalData.navHeight,
},
onLoad: function () {
},
onReachBottom(){
console.log('到底了')
}
})
{
"usingComponents": {
"nav-bar":"/components/navbar/navbar"
},
"navigationStyle": "custom"
}