【uni-app】自定義導(dǎo)航欄
新手剛玩uniapp進(jìn)行微信小程序，甚至多端的開發(fā)。原生uniapp的導(dǎo)航欄，并不能滿足ui的需求，所以各種查閱資料，導(dǎo)航欄自定義內(nèi)容 整理如下：
需要修改的文件如下：
1、pages.json
修改pages.json，啟動導(dǎo)航欄自適應(yīng)，設(shè)置"navigationStyle": "custom"
{
"pages": [
{
"path": "pages/v2/AIChat/AIChat",
"style": {
"navigationBarTitleText": "AI",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
}
}
2、system_info.js
新建system_info.js，用于獲取當(dāng)前設(shè)備的機(jī)型系統(tǒng)信息。
/**
* 此js文件管理關(guān)于當(dāng)前設(shè)備的機(jī)型系統(tǒng)信息
*/
const systemInfo = function() {
/****************** 所有平臺共有的系統(tǒng)信息 ********************/
// 設(shè)備系統(tǒng)信息
let systemInfomations = uni.getSystemInfoSync()
// 機(jī)型適配比例系數(shù)
let scaleFactor = 750 / systemInfomations.windowWidth
// 當(dāng)前機(jī)型-屏幕高度
let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
// 當(dāng)前機(jī)型-屏幕寬度
let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
// 狀態(tài)欄高度
let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
// 導(dǎo)航欄高度 注意：此導(dǎo)航欄高度只針對微信小程序有效 其他平臺如自定義導(dǎo)航欄請使用：狀態(tài)欄高度+自定義文本高度
let navHeight = 0 //rpx
// console.log(windowHeight,'哈哈哈哈哈');
/****************** 微信小程序頭部膠囊信息 ********************/
// #ifdef MP-WEIXIN
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 膠囊高度
let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
// 膠囊寬度
let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
// 膠囊上邊界的坐標(biāo)
let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
// 膠囊右邊界的坐標(biāo)
let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
// 膠囊下邊界的坐標(biāo)
let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
// 膠囊左邊界的坐標(biāo)
let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
// 微信小程序中導(dǎo)航欄高度 = 膠囊高度 + (頂部距離 - 狀態(tài)欄高度) * 2
navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
// #endif
// #ifdef MP-WEIXIN
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight,
menuButtonHeight,
menuButtonWidth,
menuButtonTop,
menuButtonRight,
menuButtonBottom,
menuButtonLeft,
navHeight
}
// #endif
// #ifndef MP-WEIXIN
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight
}
// #endif
}
export {
systemInfo
}
3、HeadNav.vue
新建組件HeadNav.vue，這是自定義導(dǎo)航欄。文章來源：http://www.zghlxwxcb.cn/news/detail-598072.html
/*
* 注意：
* 1、在傳入寬度或者高度時(shí)，如果是Number數(shù)據(jù)，傳入的值為px大小,無需帶單位，組件自動計(jì)算
* 2、在使用此導(dǎo)航欄時(shí)，建議傳入U(xiǎn)I規(guī)定的導(dǎo)航欄高度，此高度只針對除微信小程序的其他平臺有效，微信小程序的導(dǎo)航欄高度，組件自計(jì)算
*/
<template>
<view :style="{height:navHeight+'rpx'}">
<!-- 微信小程序頭部導(dǎo)航欄 -->
<!-- #ifdef MP-WEIXIN -->
<view class="wx-head-mod" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
<view class="wx-head-mod-nav-content"
:style="{height:customHeight+'rpx',justifyContent:textAlign === 'center'?'center':'left'}">
<!-- 文本區(qū) -->
<view class="wx-head-mod-nav-content-mian"
:style="{width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">
{{textContent}}
</view>
<!-- 返回按鈕 -->
<view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}"
@click="backEvent">
<view class="wx-head-mod-nav-content-back-img"
:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
</view>
</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- 除微信小程序之外的其他設(shè)備 -->
<!-- #ifndef MP-WEIXIN -->
<view class="other-head-mod"
:style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
<view class="other-head-mod-mian"
:style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign === 'center'?'center':'left'}">
<!-- 返回按鈕 -->
<view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent">
<view class="other-head-mod-mian-back-img"
:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
</view>
</view>
<!-- 標(biāo)題 -->
<view class="other-head-mod-mian-title" :style="{width:windowWidth - 184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',
paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
fontWeight:fontWeight,color:titleColor}">
{{textContent}}
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
const app = getApp()
import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'
export default {
name: "HeadView",
props: {
// 文本區(qū)域位置 left：左 center：中
textAlign: {
type: String,
default: 'center'
},
// 文本區(qū)內(nèi)容
textContent: {
type: String,
default: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好還'
},
// 文本區(qū)離左邊的距離
textPaddingLeft: {
type: Number,
default: 16
},
// 是否需要返回按鈕
isBackShow: {
type: Boolean,
default: true
},
// 文本區(qū)字體大小
fontSize: {
type: Number,
default: 20 //px
},
// 文本區(qū)字體粗細(xì)
fontWeight: {
type: Number,
default: 700
},
// 文本區(qū)返回按鈕圖片寬
backImageWidth: {
type: Number,
default: 12 //px
},
// 文本區(qū)返回按鈕圖片高
backImageHeight: {
type: Number,
default: 24 //px
},
// 返回按鈕圖標(biāo)路徑
backImageUrl: {
type: String,
default: '/static/v2/aichat/ai_robot.png'
},
// 導(dǎo)航欄整體背景顏色
navBackgroundColor: {
type: String,
default: '#2476F9'
},
// 標(biāo)題字體顏色
titleColor: {
type: String,
default: '#ffffff',
},
/******** h5端，app端需要傳入自定義導(dǎo)航欄高度 *******/
navHeightValue: {
type: Number,
default: 44 //px
}
},
computed: {
// 文本區(qū)寬度
navTextWidth() {
if (this.textAlign === 'center') {
return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'
} else {
return this.menubarLeft + 'rpx'
}
},
// 文本區(qū)paddingLeft
textPaddingleft() {
if (this.textAlign === 'center') {
return '0'
} else {
return this.textPaddingLeft + 'rpx'
}
}
},
data() {
return {
statusBarHeight: app.globalData.statusBarHeight, //狀態(tài)欄高度
navHeight: app.globalData.navHeight, //頭部導(dǎo)航欄總體高度
navigationBarHeight: app.globalData.navigationBarHeight, //導(dǎo)航欄高度
customHeight: app.globalData.customHeight, //膠囊高度
scaleFactor: app.globalData.scaleFactor, //比例系數(shù)
menubarLeft: app.globalData.menubarLeft, //膠囊定位的左邊left
windowWidth: app.globalData.windowWidth * app.globalData.scaleFactor
};
},
methods: {
backEvent() {
uni.navigateBack({
delta: 1
})
}
},
created() {
/* 獲取設(shè)備信息 */
const SystemInfomations = systemInfo()
/* 通用平臺 */
this.statusBarHeight = SystemInfomations.statusBarHeight //狀態(tài)欄高度
this.scaleFactor = SystemInfomations.scaleFactor //比例系數(shù)
this.windowWidth = SystemInfomations.windowWidth //當(dāng)前設(shè)備的屏幕寬度
/* 微信小程序平臺 */
// #ifdef MP-WEIXIN
this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //頭部導(dǎo)航欄總高度
this.navigationBarHeight = SystemInfomations.navHeight //頭部導(dǎo)航欄高度
this.customHeight = SystemInfomations.menuButtonHeight //膠囊高度
this.menubarLeft = SystemInfomations.menuButtonLeft //膠囊左邊界距離左上角的距離
// #endif
console.log("this.navHeight:", this.navHeight)
}
}
</script>
<style>
/* #ifdef MP-WEIXIN */
.wx-head-mod {
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.wx-head-mod-nav {
box-sizing: border-box;
width: 100%;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.wx-head-mod-nav-content {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: left;
align-items: center;
position: relative;
}
/* 文本區(qū) */
.wx-head-mod-nav-content-mian {
box-sizing: border-box;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 返回按鈕 */
.wx-head-mod-nav-content-back {
box-sizing: border-box;
width: 60rpx;
height: 100%;
/* background-color: aqua; */
position: absolute;
top: 0;
left: 32rpx;
display: flex;
align-items: center;
justify-content: left;
}
.wx-head-mod-nav-content-back-img {
box-sizing: border-box;
}
/* #endif */
/* #ifndef MP-WEIXIN */
.other-head-mod {
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.other-head-mod-mian {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
position: absolute;
left: 0;
bottom: 0;
}
/* 返回按鈕 */
.other-head-mod-mian-back {
box-sizing: border-box;
height: 100%;
width: 60rpx;
position: absolute;
left: 32rpx;
top: 0;
display: flex;
align-items: center;
}
/* 標(biāo)題 */
.other-head-mod-mian-title {
box-sizing: border-box;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* #endif */
</style>
4、AIChat.vue
修改要自定義導(dǎo)航欄的組件文章來源地址http://www.zghlxwxcb.cn/news/detail-598072.html
<template>
<view style="height: 100%;">
<head-nav :style="navStyle"></head-nav>
<view class="container" :style="containerStyle">
<scroll-view :scroll-top="scrollTop" class="chat-container" :scroll-into-view="scrollintoid" scroll-y="true"
@scroll="handleScroll" @scrolltolower="handleScrollToLower">
省略中間布局內(nèi)容
</scroll-view>
</view>
</view>
</template>
<script>
import HeadNav from '@/pages/v2/components/HeadNav.vue'
import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'
export default {
components: {
MarkdownViewer,
HeadNav
},
data() {
return {
// 省略部分變量
containerStyle: "",
navStyle: ""
};
},
onReady() {
// -------------------------- 經(jīng)典界面自定義，需要記錄-------------------------------------------------------------
// 設(shè)備系統(tǒng)信息
let systemInfomations_ = uni.getSystemInfoSync()
// 機(jī)型適配比例系數(shù)
let scaleFactor_ = 750 / systemInfomations_.windowWidth
// 當(dāng)前機(jī)型-屏幕高度
let windowHeight_ = systemInfomations_.windowHeight * scaleFactor_ //rpx
/* 獲取設(shè)備信息 */
const SystemInfomations = systemInfo()
/* 通用平臺 */
const statusBarHeight = SystemInfomations.statusBarHeight //狀態(tài)欄高度
const scaleFactor = SystemInfomations.scaleFactor //比例系數(shù)
const windowWidth = SystemInfomations.windowWidth //當(dāng)前設(shè)備的屏幕寬度
/* 微信小程序平臺 */
// #ifdef MP-WEIXIN
const navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //頭部導(dǎo)航欄總高度
const navigationBarHeight = SystemInfomations.navHeight //頭部導(dǎo)航欄高度
const customHeight = SystemInfomations.menuButtonHeight //膠囊高度
const menubarLeft = SystemInfomations.menuButtonLeft //膠囊左邊界距離左上角的距離
this.containerStyle = ' height:' + (systemInfomations_.windowHeight - statusBarHeight - 10) + 'px;';
// #endif
console.log("this.viewHight:", this.viewHeight)
/* 通用平臺 */
// #ifndef MP-WEIXIN
this.containerStyle = 'height:' + (systemInfomations_.windowHeight - 54) + 'px;';
this.navStyle = 'height:' + 44 + 'px';
// #endif
// ---------------------------------------------------------------------------------------
}
}
</script>
到了這里，關(guān)于【uni-app】自定義導(dǎo)航欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
