效果圖：
使用一般需要隐藏原生導航欄，即可在pages.json檔案中，對應的頁面設定中添加一下代碼即可：
"navigationStyle":"custom"
NavBar 導航欄
導航欄元件，主要用于頭部導航，元件名：
uni-custom-navBar
，代碼塊： navigationBar。
在
script
中引用元件：
<script>
import navigationBar from "../../components/uni-custom-navbar.vue"
export default {
components: {
navigationBar
}
} </script>
在
template
中使用元件：
<template>
<navigationBar title="标題文字" leftText="傳回" rightText="分享" backgroundColor="#007AFF"
rightColor="#ff00ff" barHeight="90"></navigationBar>
</template>
屬性說明：
| 屬性名 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| title | String | - | 标題文字 |
| titleColor | String | #000000 | 标題文字的顔色 |
| leftText | String | - | 左側按鈕文本 |
| leftColor | String | #000000 | 左側按鈕文本顔色 |
| rightText | String | - | 右側按鈕文本 |
| rightColor | String | #000000 | 右側按鈕文本顔色 |
| leftIcon | String | - | 左側按鈕圖示-路徑 |
| rightIcon | String | - | 右側按鈕圖示-路徑 |
| backgroundColor | String | #FFFFFF | 預設設定導航欄背景顔色 |
| barHeight | Number | 90 | 預設設定導航欄高度 |
| fixed | Boolean | false | 是否固定頂部（如果固定，做好下面布局設定margin-top: barHeight） |
| @clickLeft | - | - | 左側按鈕點選時觸發 |
| @clickRight | - | - | 右側按鈕點選時觸發 |
這樣完成了自定義導航欄元件。
1.代碼：CustomComponents8
<template>
<view class="content">
<!-- toolBar -->
<navigationBar title="标題文字" leftText="傳回" rightText="分享" backgroundColor="#007AFF" rightColor="#ff00ff"
barHeight="90" @clickLeft="btnBack" @clickRight="brnFontShare"></navigationBar>
<!-- 資料測試清單 -->
<view class="list" v-for="(item ,index) in list">
<text class="txt">支付手段開發計劃資料庫 {{index}}</text>
</view>
</view>
</template>
<script>
import navigationBar from "../../components/uni-custom-navbar.vue"
export default {
components: {
navigationBar
},
data() {
return {
list: ["", "", "", "", "", ""],
}
},
methods: {
// 傳回
btnBack: function() {
uni.showToast({
title: "導航欄 左側按鈕被點選...",
icon: "none",
duration: 2000
})
},
// 分享
brnFontShare:function(){
uni.showToast({
title: "導航欄 右側按鈕被點選...",
icon: "none",
duration: 2000
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #4CD964;
width: 96%;
height: 300rpx;
margin-top: 20rpx;
}
.txt {
color: white;
font-size: 30rpx;
}
page {
background-color: #FFFFFF;
}
</style>
2.自定義導航欄元件 uni-custom-navbar.vue
<template name="uni-custom-navbar">
<!-- toolBar -->
<view :class="fixed?'uni-navbar-fixed':'uni-navbar'"
:style="'width: 100%; height:'+barHeight+'rpx; background-color:'+backgroundColor">
<!-- 導航欄 左側 -->
<view class="bar-left">
<image class="left_icon" @click="onClickLeft" v-if="leftIcon.length > 0" :src="leftIcon" mode="scaleToFill">
</image>
<text class="txt-left" @click="onClickLeft" v-else :style="'color: '+leftColor+';'">{{leftText}}</text>
</view>
<!-- 導航欄 中間标題 -->
<text class="bar-center" :style="'color: '+titleColor+';'">{{title}}</text>
<!-- 導航欄 右側 -->
<view class="bar-right">
<image class="right_icon" @click="onClickRight" v-if="rightIcon.length > 0" :src="rightIcon"
mode="scaleToFill"></image>
<text class="txt-right" @click="onClickRight" v-else :style="'color: '+rightColor+';'">{{rightText}}</text>
</view>
</view>
</template>
<script>
export default {
name: "uni-custom-navbar",
data() {
return {
// fixed: false, //是否固定頂部
// backgroundColor: "#FFFFFF", //預設設定狀态欄背景顔色
// barHeight: "90", //預設設定狀态欄高度,
// title: "标題文字", //标題
// titleColor: "#000000", //标題文字的顔色
// leftText: "傳回", //左側按鈕文本
// leftColor: "#000000", //左側按鈕文本顔色
// rightText: "我的", //右側按鈕文本
// rightColor: "#000000", //右側按鈕文本顔色
// leftIcon: "../../static/nav_back.png", //左側按鈕圖示
// rightIcon: "../../static/nav_mine.png", //右側按鈕圖示
};
},
props: {
title: {
type: String,
default: ""
},
leftText: {
type: String,
default: ""
},
rightText: {
type: String,
default: ""
},
leftIcon: {
type: String,
default: ""
},
rightIcon: {
type: String,
default: ""
},
fixed: {
type: [Boolean, String],
default: false
},
titleColor: {
type: String,
default: "#000000"
},
rightColor: {
type: String,
default: "#000000"
},
leftColor: {
type: String,
default: "#000000"
},
backgroundColor: {
type: String,
default: "#FFFFFF"
},
barHeight: {
type: String,
default: "90"
}
},
methods: {
onClickLeft() {
this.$emit("clickLeft");
},
onClickRight() {
this.$emit("clickRight");
},
}
}
</script>
<style>
.right_icon {
width: 44rpx;
height: 44rpx;
margin-right: 20rpx;
}
.left_icon {
width: 44rpx;
height: 44rpx;
margin-left: 20rpx;
}
.bar-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
font-size: 36rpx;
}
.txt-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 10rpx;
padding: 20rpx;
font-size: 32rpx;
min-width: 65rpx;
}
.txt-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 10rpx;
padding: 20rpx;
font-size: 32rpx;
min-width: 65rpx;
}
.bar-right {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.bar-left {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.uni-navbar-fixed {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
position: fixed;
top: 0;
}
.uni-navbar {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
</style>
Demo下載下傳