uniapp公用返回组件

uniapp写一个公用的头部组件,包含home和返回。

  1. 页面中的引用
    在这里插入图片描述
    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>
  1. 在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>
  1. 在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

效果图如下
在这里插入图片描述
可以返回上一页和home页,也可以配置自己喜欢的颜色。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/29823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web前端之vue一键部署的shell脚本和它的点.bat文件、海螺AI、ChatGPT

MENU 前言vite.config.ts的配置deploy文件夹的其他内容remote.shpwd.txtdeploy.bat 前言 1、在src同级新建deploy.bat文件&#xff1b; 2、在src同级新建deploy文件夹&#xff0c;文件夹中新建pwd.txt和remote.sh文件&#xff1b; 3、配置好后&#xff0c;直接双击deploy.bat文…

达梦数据库v8 单机恢复到 DSC环境

测试环境是单机&#xff0c;生产环境是dsc&#xff0c;需要将测试环境数据恢复到生产环境 首先备份测试环境单机数据库&#xff0c;可以使用dmrman&#xff08;需要关闭数据库&#xff0c;因该环境还有其他同事测试&#xff0c;使用在线备份&#xff09; 1、单机数据库备份 …

Flat Ads:轻松玩转Kwai广告,开启全球营销新篇章

在当今数字化时代,短视频平台已成为人们生活中不可或缺的一部分。其中,快手旗下的一款海外短视频应用——Kwai 在海外新兴的拉美、中东、东南亚等多个市场迅速崛起并赢得了广大用户的喜爱。 作为全球头部短视频平台,Kwai 已遍布世界30多个国家,月活超过10亿,APP下载量位居拉美、…

咬伤首选的抗菌药物是?

咬伤首选的抗菌药物是()参考答案 A.阿莫西林克拉维酸钾B.头孢曲松C.万古霉素D.阿米卡星 莫匹罗星软膏的疗程至少是() A.24小时B.48小时C.72小时D.5天 15岁男性诉发冷和头涌。3天前在练习中投棒球时右手起了水泡。体格检查发现&#xff0c;红色的窄条纹从水疱延伸到腋窝。腋窝区…

怎么给软件做数字证书签名?

要想让软件获得身份并让计算机识别软件发布者就需要申请数字证书&#xff0c;CA机构严格实名认证后签发的数字证书就可以对指定的软件签名使用。 代码签名是使用数字证书对软件、固件、脚本和可执行文件进行签名的过程&#xff0c;旨在向最终用户和客户保证代码的完整性和真实…

libspice源文件笔记

与qemu相关的文件 1、spice-qxl.h&#xff1a;给qemu调用的接口声明 2、qxl.cpp/.h : 与qemu显示对接的核心接口 3、red-worker.cpp/.h&#xff1a;实现与qemu&#xff0c;client对接&#xff08;包括DisplayChannel和CursorChannel&#xff09; 4、dispatcher.cpp/.h&…

【深度学习驱动流体力学】剖析流体力学可视化paraview原理

目录 1.paraview版本2.配置过程检查插件库文件配置 ParaView 环境变量启动 ParaView 并检查插件3.可视化测试插件功能 3.加载数据进行可视化第一步: 导入案例第二步:查看当前目录未更新前的内容第三步:使用 blockMesh 命令生成腔体案例的网格第四步:运行仿真icoFoam第五步:使用…

短剧APP开发,探索短剧市场的新机遇

近几年&#xff0c;短剧市场得到了繁荣发展&#xff0c;随着短剧的快速发展&#xff0c;短剧APP也得到发展&#xff0c;受到了越来越多用户的喜欢。通过短剧APP&#xff0c;为大众带来多样、高质量的短剧内容。对于影视创作者来说&#xff0c;短剧APP在线观看系统的开发也将成为…

颜色空间 Color Space

颜色空间是颜色集合的数学表示。三种最常用的颜色模型是:RGB(用于计算机图形学中);YIQ、YUV或YCbCr(用于视频系统中);CMYK(用于彩色打印)。为了更好的理解颜色模型,先介绍几个基本的颜色概念。 亮度(lightness or intensity or luminance):亮度是光作用于人眼所引起…

安装ps提示vcruntime140.dll丢失的多种有效的解决方法分享

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到vcruntime140.dll”。这个错误通常出现在运行某些程序时&#xff0c;特别是ps这样的图像处理软件。那么&#xff0c;如何解决这个错误呢&#xff1f;小编将为您详细介绍打开提示ps找…

【车载音视频AI电脑】全国产海事船载视频监控系统解决方案

海事船载视频监控系统解决方案针对我国快速发展的内河航运、沿海航运和远洋航运中存在的航行安全和航运监管难题&#xff0c;为船舶运营方、政府监管部门提供一套集视频采集、存储、回放调阅为一体的视频监控系统&#xff0c;对中大型船舶运行中的内部重要部位情况和外部环境进…

Windows的hosts文件中配置域名——在host文件中添加域名与IP的映射关系

Windows配置域名解析——在hosts文件中添加映射关系 要配置域名解析&#xff0c;步骤如下&#xff1a; 首先选中Windows的hosts文件——即C:\Windows\System32\drivers\etc&#xff0c;右键属性&#xff0c;在属性对话框中选中“安全”选项卡&#xff0c;点击“编辑”按钮&…

甘特图如何画以及具体实例详解

甘特图如何画以及具体实例详解 甘特图是一种常见的项目管理工具又称为横道图、条状图(Bar chart)。是每一位项目经理和PMO必须掌握的项目管理工具。甘特图通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。但是多项目经理和PMO虽然考了各种证…

python_计算时间差统计数据丢失情况

计算文件中相邻两行的时间差&#xff0c;统计数据丢失的情况&#xff0c;并写入文件中 # 分析outpos的gga数据丢失情况 import os import matplotlib.pyplot as plt from datetime import datetime from PyQt5.QtWidgets import QApplication, QDialog, QVBoxLayout, QLabel, …

Maya 白膜渲染简单教程

零基础渲染小白&#xff0c;没关系&#xff0c;一篇超简单教程带你学会渲染白膜。 先打开Maya&#xff0c;看看面板有没有渲染器&#xff0c;这里以Arnold为主。 要是没有这个&#xff0c;就去找插件管理器&#xff0c; Arnold的是mtoa&#xff0c;在搜索栏搜&#xff0c;然后把…

NXP RT1060学习总结 - fsl_flexcan 基础CAN函数说明 -3

概要 CAN测试源码&#xff1a; https://download.csdn.net/download/qq_35671135/89425377 根据fsl_flexcan.h文件从文件末尾往前面梳理&#xff0c;总共30个基础CAN函数&#xff1b; 该文章只梳理常规CAN&#xff0c;增强型CAN后面再单独梳理。 使用的是RT1064开发板进行测试…

未来科技:Web3如何重塑物联网生态系统

随着Web3技术的崛起&#xff0c;物联网&#xff08;IoT&#xff09;的发展正迎来一场深刻的变革。本文将深入探讨Web3如何重塑物联网生态系统&#xff0c;从技术原理到应用实例&#xff0c;全面解析其对未来科技发展的影响和潜力。 1. Web3技术简介与发展背景 Web3技术是建立在…

【C语言】信号

【C语言】信号 信号1. 信号状态2. 信号处理方式3. 信号注册相关函数4. 信号集相关函数 最后 信号 1. 信号状态 信号有三种状态&#xff1a;产生、未决和递达 信号产生方式&#xff1a; 按键产生&#xff0c;ctrlc 产生 中断信号SIGINT&#xff0c;ctrl \ 产生退出信号 SIG…

ABSD-系统架构师(十三)

1、CDN和反向代理的基本原理都是&#xff08;&#xff09;。 A缓存 B负载均衡 C路由转发 DNAT转发 答案&#xff1a;A 2、&#xff08;必考&#xff09;在ABSD&#xff08;基于架构的软件开发&#xff09;方法中&#xff0c;顶层被分解为&#xff08;&#xff09;&#xff…

【odoo17】前端中的防抖函数

概要 在Odoo前端开发中&#xff0c;防抖&#xff08;Debounce&#xff09;技术是一种用于优化性能和提升用户体验的技术。防抖主要用于限制高频事件的触发&#xff0c;例如输入框的输入事件、窗口的调整大小事件或滚动事件。通过限制这些事件的频繁触发&#xff0c;可以减少不必…