uniapp公用返回组件

本文主要是介绍uniapp公用返回组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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().globalDataexport 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 = thislet 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 MPconst {top,left,right,width,height} =uni.getMenuButtonBoundingClientRect();menuGap = windowWidth - right;menuWidth = width;menuHeight = height;statusHeight = top - menuGap;// #endif// #ifdef APP-PLUSstatusHeight = statusBarHeight;// #endifthis.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 = falseVue.prototype.formatImage = formatImage
Vue.prototype.formatPrice = formatPrice
Vue.prototype.validatePhoneNumber = validatePhoneNumber
Vue.prototype.validateIDCard = validateIDCard
Vue.prototype.$store = storelet 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