微信小程序之:头部导航栏自定义
在开发过程中首页的导航栏上需要显示搜索框,如下图所示:
这种情况自需要自定义头部导航。
1.在pages.json页面设置导航栏样式
"navigationStyle": "custom"
若只有单个页面需要,则设置在单个页面的style下设置,否则在globalStyle中全局设置。具体参考文档https://uniapp.dcloud.io/collocation/pages?id=globalstyle
2.把导航栏封装成组件方便在每个页面使用(navBar.vue)
(1)view部分
<template name="navBar">
<view class='navbarBox' :style="'height: '+(status + navHeight)+'px'">
<view class='navStatus' :style="'height: '+status+'px;'+containerStyle"></view>
<view class='navbarInfo' :style="'height: '+navHeight+'px;'+containerStyle">
<view class='back-icon' v-if="backIcon" @click='back'>
<image class="pic" :src='backIcon'></image>
</view>
<view class='home-icon' v-if="homeIcon" @click='home'>
<image class="pic" :src='homeIcon'></image>
</view>
<view class='nav-icon' v-if="titleImg">
<image class="pic" :src='titleImg' :style='iconStyle'></image>
</view>
<view class="searchBox" v-if="titleSearch">
<view class='nav-title1' v-if="titleText && !titleImg">
<text class="txt" :style='textStyle'>{{titleText}}</text>
</view>
<view class='nav-search' @click="search">
<text class="txt">搜索</text>
<text class="iconfont icon-search"></text>
</view>
</view>
<view class='nav-title' v-if="titleText && !titleImg && !titleSearch">
<text class="txt" :style='textStyle'>{{titleText}}</text>
</view>
</view>
</view>
</template>
(2)css部分
.navbarBox {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
.navbarInfo {
position: relative;
font-size: 0;
}
.back-icon,
.home-icon {
width: 28px;
height: 100%;
position: absolute;
transform: translateY(-50%);
top: 50%;
display: flex;
}
.back-icon {
left: 16px;
}
.home-icon {
left: 44px
}
.back-icon .pic {
width: 28px;
height: 28px;
margin: auto;
}
.home-icon .pic {
width: 20px;
height: 20px;
margin: auto;
}
.searchBox{
width: 66.6%;
height: 100%;
position: absolute;
// transform: translate(-50%, 0);
left: 0;
top: 0;
display: flex;
justify-content: flex-start;
align-items: center;
.nav-title1{
max-width: 40%;
margin-left: 5%;
display: inline-block;
font-weight: bold;
font-size: 0;
.txt {
width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.nav-search{
width: 45%;
height: 28px;
font-size: 14px;
line-height: 28px;
border-radius: 28px;
margin-left: 5%;
background: #FFFFFF;
text-align: center;
color: #808080;
.icon-search{
font-size: 16px;
margin-left: 2px;
}
}
}
.nav-title,
.nav-icon {
max-width: 33%;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
font-weight: bold;
.txt {
width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
(3)javaScript部分
var app = getApp();
var allData = app.globalData;
export default {
name: "navBar",
//属性
props: {
titleSearch: {
type: Boolean,
default: false
},
background: {
type: String,
default: '#FF3366'
},
color: {
type: String,
default: '#ffffff'
},
titleText: {
type: String,
default: '导航栏'
},
titleImg: {
type: String,
default: ''
},
backIcon: {
type: String,
default: ''
},
homeIcon: {
type: String,
default: ''
},
fontSize: {
type: Number,
default: 16
},
iconHeight: {
type: Number,
default: 19
},
iconWidth: {
type: Number,
default: 58
}
},
//组件生命周期
created: function(e) {
var that = this;
that.setNavSize();
that.setStyle();
},
data() {
return {
status: 0,
navHeight: 0,
containerStyle: '',
textStyle: '',
iconStyle: '',
}
},
methods: {
// 通过获取系统信息计算导航栏高度
setNavSize: function() {
var that = this;
var sysinfo = uni.getSystemInfoSync();
var statusHeight = sysinfo.statusBarHeight;
var isiOS = sysinfo.system.indexOf('iOS') > -1;
var navHeight;
if (!isiOS) {
navHeight = 48;
} else {
navHeight = 44;
}
that.status = statusHeight;
that.navHeight = navHeight;
allData.pHeight = that.status + that.navHeight;
},
setStyle: function() {
var that = this,
containerStyle, textStyle, iconStyle;
containerStyle = [
'background:' + that.background
].join(';');
textStyle = [
'color:' + that.color,
'font-size:' + that.fontSize + 'px'
].join(';');
iconStyle = [
'width: ' + that.iconWidth + 'px',
'height: ' + that.iconHeight + 'px'
].join(';');
that.containerStyle = containerStyle;
that.textStyle = textStyle;
that.iconStyle = iconStyle;
},
// 返回事件
back: function() {
uni.navigateBack({
delta: 1
})
this.$emit('back',{back: 1});
},
home: function() {
this.$emit('home','home');
},
search: function() {
this.$emit('search','search');
}
}
}
3.引用navBar组件
- 在pages.json中配置:
"usingComponents": {
"navBar": "/components/navBar/navBar"
},
- 在index.vue中使用
//script
import navBar from "@/components/navBar/navBar";
//template
<navBar v-if="isNavBar" :title-text="titleName" :title-search="true" @search="search" back-icon="/static/back.png" @back="back"/>