uniapp写一个公用的头部组件，包含home和返回。
- 页面中的引用
2.在components文件夹下，新建一个navBar.vue
<template>
<view class="view-wrap">
<view :style="{ height: barHeight }"></view>
<view class="nav-bar-wrap" :style="{ background: background }">
<view class="status-bar" :style="{ height: statusHeight }"></view>
<view class="nav-bar" :style="{ padding: menuGap, gap: menuGap, height: menuHeight }">
<view class="left" v-if="back"
:style="{ width: menuWidth, height: menuHeight, lineHeight: menuHeight }">
<uni-icons type="arrow-left" size="20" :color="backColor" @click="handleBack"></uni-icons>
<uni-icons type="home-filled" size="20" :color="backColor" @click="handleHome"></uni-icons>
</view>
<view v-else
:style="{ width: menuWidth, height: menuHeight, lineHeight: menuHeight }">
</view>
<view class="logo-block" v-if="type == 'icon'">
<image class="logo"
src="https://img.js.design/assets/img/63eef16e94031f91576975f7.png#6f1b14d0e35a1527a5a6621e0b5125a8">
</image>
</view>
<view :style="{ color: backColor, fontSize: titleFontSize }" v-if="type == 'title'">
{{ title }}
</view>
<view v-if="type == 'slot'" class="container" v-else>
<slot></slot>
</view>
<view class="right" :style="{ width: menuWidth, height: menuHeight }"></view>
</view>
</view>
</view>
</template>
<script>
const {
windowWidth,
statusHeight,
menuGap,
menuWidth,
menuHeight
} = getApp().globalData
export default {
props: {
background: {
type: String,
default: '#ffffff'
},
backOption: {
default: false,
type: Boolean
},
back: {
type: Boolean
},
type: {
type: String,
default: 'title'
},
title: {
type: String,
default: ''
},
backColor: {
type: String,
default: '#000'
},
titleFontSize: {
type: String,
},
},
data() {
return {
barHeight: '32px',
menuGap: '7px',
menuWidth: '0px',
menuHeight: '32px',
statusHeight: '7px',
borderRadius: '4px',
keyWord: '',
};
},
mounted() {
this.statusHeight = statusHeight + 'px'
this.menuGap = menuGap + 'px'
this.menuWidth = menuWidth + 'px'
this.menuHeight = menuHeight + 'px'
this.borderRadius = menuHeight / 2 + 'px'
this.barHeight = statusHeight + menuHeight + menuGap * 2 + 'px'
uni.setStorageSync('barHeight', this.barHeight)
},
computed: {
barWidth() {
if (this.back) {
return windowWidth - menuWidth - menuGap * 4 - 26 + 'px'
} else {
return windowWidth - menuWidth - menuGap * 3 + 'px'
}
}
},
methods: {
//处理返回
handleBack() {
let that = this
let pages = getCurrentPages();
let currPage = pages[pages.length - 1]; //当前页面
let prevPage = pages[pages.length - 2];
uni.navigateBack({
delta: 1,
success: function(e) {
if (that.backOption) {
let page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
}
})
uni.$emit('back')
},
handleHome() {
uni.switchTab({
url: '/pages/index/index'
})
},
}
}
</script>
<style lang="scss" scoped>
.view-wrap {
position: relative;
}
.nav-bar-wrap {
position: fixed;
top: 0;
z-index: 99;
width: 100%;
left: 0;
right: 0;
// box-shadow: 0px 3px 6px 0px rgba(216, 216, 216, 0.16);
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
.left {
// width: 26px;
// width: 79px;
border: 0.5px solid rgba(241, 241, 241, 1);
border-radius: 30px;
// height: 30px;
// line-height: 30px;
flex-shrink: 0;
display: flex;
justify-content: space-between;
padding: 0 13px;
box-sizing: border-box;
// text-align: center;
background-color: rgba(255, 255, 255, 0.8);
}
.logo-block {
// margin-left: 45%;
}
.logo {
width: 34.14px;
height: 40.48px;
}
.container {}
.right {
flex-shrink: 0;
}
}
}
</style>
- 在App.vue中设置全局变量
<script>
export default {
globalData: {},
onLaunch: function() {
this.initBounding();
},
onHide: function() {},
methods: {
initBounding() {
const {
windowWidth,
windowHeight,
statusBarHeight
} =
uni.getSystemInfoSync();
let menuGap = 7;
let menuWidth = 0;
let menuHeight = 32;
let statusHeight = 7;
// #ifdef MP
const {
top,
left,
right,
width,
height
} =
uni.getMenuButtonBoundingClientRect();
menuGap = windowWidth - right;
menuWidth = width;
menuHeight = height;
statusHeight = top - menuGap;
// #endif
// #ifdef APP-PLUS
statusHeight = statusBarHeight;
// #endif
this.globalData.windowWidth = windowWidth;
this.globalData.windowHeight = windowHeight;
this.globalData.statusHeight = statusHeight;
this.globalData.menuGap = menuGap;
this.globalData.menuWidth = menuWidth;
this.globalData.menuHeight = menuHeight;
},
},
};
</script>
<style lang="scss">
@import "@/common/index.scss";
@import "@/common/common.scss";
// 设置整个项目的背景色
page {
background: #F4F4F4;
//font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
font-family: "Source Han Sans CN", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
</style>
- 在main.js中注册全局组件
import App from './App'
import {formatImage,formatPrice,validatePhoneNumber,validateIDCard} from "@/utils/index.js"
import store from './store'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
Vue.prototype.formatImage = formatImage
Vue.prototype.formatPrice = formatPrice
Vue.prototype.validatePhoneNumber = validatePhoneNumber
Vue.prototype.validateIDCard = validateIDCard
Vue.prototype.$store = store
let onFun = uni.$on;
uni.$on = (eventName,obj) =>{
try {
uni.$off(eventName);
} catch (error) {}
onFun(eventName,obj);
}
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
// 注册全局组件
for (let key in components) {
app.component(key,components[key])
}
return {
app
}
}
// #endif
效果图如下
可以返回上一页和home页，也可以配置自己喜欢的颜色。
