微信小程序自定义顶部导航栏封装
先在page.json中找到要自定义导航栏的页面，给"style"设置属性"navigationStyle":“custom”，设置后默认的导航栏就没有，我们就可以自定义了。
下面是我自己封装的一个导航栏，用的是uni-app。
<template>
<view class="pageHead">
<view class="headContent">
<uni-icons v-if="backIcon" class="back" type="back" size="16" color="#0079FE" @click="backLastPage"></uni-icons>
<text class="headTitle">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
props:{
title:{
type:String,
default: ''
},
backIcon: {
type: Boolean,
default: true
}
},
data(){
return {
}
},
methods:{
backLastPage(){
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style lang="less" scoped>
.pageHead{
height: 166rpx;
text-align: center;
}
.headContent{
height: 84rpx;
width: 100%;
padding-top: 82rpx;
line-height: 84rpx;
font-size: 28rpx;
font-weight: 700;
font-style: 微软雅黑 Bold;
background-color: #FFFFFF;
position: fixed;
top: 0;
z-index: 11;
color: #333333;
.back{
position: absolute;
text-align: left;
left: 30rpx;
}
}
</style>
