自定义导航栏 通过slot插槽能够实现以下功能
1.自定义状态栏颜色
2.自定义导航栏颜色
3.自定义导航栏状态栏整体颜色
3.自定义导航栏状态栏整体背景图片
4.slot name="left"能自定义导航栏左边容器
5.slot name="center"能自定义导航栏中间容器
6.slot name="right"能自定义导航右边容器
7.自定义返回按钮 需要隐藏式back="{{false}}"
直接上代码了
//app.js
App({
onLaunch: function () {
wx.db = {};
this.getSystemInfo();
},
getSystemInfo() {
var res = wx.getSystemInfoSync();
//获取状态栏高度
wx.db.statusBarHeight = res.statusBarHeight;
if (res.platform == 'android') {
wx.db.navBarHeight = 48;
} else {
wx.db.navBarHeight = 44;
}
},
})
<!-- components/kz-nav-bar/kz-nav-bar.wxml -->
<view class="container">
<!-- 状态栏 -->
<view class="nav-statusBar" style="{{statusBarStyle}}"></view>
<!-- 导航栏 -->
<view class="nav-navBar" style="{{navBarStyle}}">
{{title}}
<slot name="center"></slot>
<view class="left-container">
<view wx:if="{{back}}" class="image-container" bind:tap="onbackAction">
<image class="back-arrow" src="/images/arrow_back.png"></image>
</view>
<slot name="left"></slot>
</view>
<slot name="right"></slot>
</view>
<!-- 背景 -->
<view class="bg-view" style="background-color:{{color}}">
<!-- 背景图片 -->
<image class="bg-image" src="{{image}}" mode="aspectFill" />
</view>
</view>
// components/kz-nav-bar/kz-nav-bar.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示返回按钮 默认显示
back: {
type: Boolean,
value: true
},
// 标题 标题如果为空 可以通过slot name:center设置自定义view
title: {
type: String,
value: ''
},
// 字体颜色 默认黑体
titleColor:{
type:String,
value:'var(--color-black)'
},
// 字体大小 单位rpx
fontSize:{
type:Number,
value:35
},
// 背景颜色 默认白色
color: {
type: String,
value: '#fff'
},
// 背景图片
image: {
type: String,
value: ''
},
// 状态栏颜色
statusBarColor: {
type: String,
value: ''
},
// 导航栏颜色
navBarColor: {
type: String,
value: ''
}
},
lifetimes: {
attached: function () {
//重设style
var { statusBarStyle, navBarStyle, statusBarColor, navBarColor,titleColor,fontSize } = this.data;
const statusBarHeight = wx.db.statusBarHeight;
const navBarHeight = wx.db.navBarHeight;
statusBarStyle = `height:${statusBarHeight}px;line-height:${statusBarHeight}rpx;background-color:${statusBarColor};`;
navBarStyle = `height:${navBarHeight}px;line-height:${navBarHeight}rpx;background-color:${navBarColor};color:${titleColor};font-size:${fontSize}rpx;`;
this.setData({ statusBarStyle, navBarStyle });
}
},
/**
* 组件的初始数据
*/
data: {
statusBarStyle: '',
navBarStyle: ''
},
/**
* 组件的方法列表
*/
methods: {
onbackAction() {
// 返回上一级
try {
wx.navigateBack({
delta: 1
});
} catch (error) {
}
}
}
})
/* components/kz-tabbar/kz-tabbar.wxss */
.kz-tabbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-content: center;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
/* border-top: 1rpx solid rgba(0, 0, 0, 0.1); */
z-index: 1024;
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
}
.tabbar-item{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.tabbar-item-image{
50rpx;
}
.tabbar-item-title{
font-size: 20rpx;
}
使用
<kz-nav-bar title="订单" back="{{true}}" color="{{'var(--color-orange)'}}"></kz-nav-bar>>