小程序自定义导航条
主要思路将自带的关闭,自己编写一个,因为用自带的可控性查,就自己写一个吧,查了百度,写下来这算是一个比较完整的答案了
1.首先在app.json中将navigationStyle设置为“custom”,并且定义一个组件navbar
{
"pages":[
],
"usingComponents": {
"navbar": "/pages/navbar/navbar"
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#77d5fb",
"navigationBarTextStyle":"white",
"navigationStyle":"custom"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.接着在app.js中获取导航的高度
onLaunch: function () {
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight;
}, fail(err) {
console.log(err);
}
})
}
3.接着再创建一个共用的navbar导航条
navbar.wxml 图片路径换下就可以
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='capsule' wx:if="{{ back || home }}">
<view bindtap='back' wx:if="{{back}}">
<image src='../../images/back.png'></image>
</view>
<view bindtap='backHome' wx:if="{{home}}" block="{{true}}">
<image src='../../images/home.png'></image>
</view>
</view>
<view class='title'>{{text}}</view>
</view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>
navbar.wxss
.navbar {
width: 100%;
background-color: #1797eb;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.title-container {
height: 40px;
display: flex;
align-items: center;
position: relative;
}
.capsule {
margin-left: 10px;
height: 30px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 16px;
display: flex;
align-items: center;
}
.capsule > view {
width: 45px;
height: 60%;
position: relative;
}
.capsule > view:nth-child(2) {
border-left: 1px solid #fff;
}
.capsule image {
width: 50%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title {
color: white;
position: absolute;
top: 6px;
left: 104px;
right: 104px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
navbar.js
navigationBarHeight:是导航条的总高度
statusBarHeight:是只有最上面一条的高度
text:前台传值格式text="标题"
back:返回上级,前台传值格式back="{{false}}"
home:返回首页,前台传值格式home="{{false}}"
const app = getApp()
Component({
properties: {
text:String,
back: {
type: Boolean,
value: true
},
home: {
type: Boolean,
value: true
}
},
data: {
statusBarHeight: app.globalData.navHeight + 'px',
navigationBarHeight: (app.globalData.navHeight + 44) + 'px'
},
methods: {
backHome: function () {
wx.navigateTo({
url: '/pages/index/index'
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})
navbar.json
{
"usingComponents": {}
}
4.引用导航条,放在页面顶部就行
<navbar text="大客车" back="{{false}}"></navbar>
<view class='page-content'>
</view>
参考链接:https://www.cnblogs.com/fundebug/p/customize-wechat-miniprogram-navigation.html