vue3+ts+uniapp微信小程序顶部导航栏

这是colorui改的,不用就不用看啦

color-ui(https://docs.xzeu.com/#/)
在这里插入图片描述

  1. 新建component文件夹创建topNavigation.vue
<template><view><view class="cu-custom" :style="'height:' + CustomBar + 'px'"><view class="cu-bar fixed" :style="styleBar" :class="[bgImage ? 'none-bg text-white bg-img' : '', bgColor]"><view class="action" @tap="BackPage" v-if="isBack"><text class="cuIcon-back"></text><slot name="backText"></slot></view><view class="content" :style="[{ top: StatusBar + 'px' }]"><slot name="content"></slot></view><slot name="right"></slot></view></view></view>
</template><script lang="ts" setup>import { onLoad } from '@dcloudio/uni-app'
import { defineComponent, ref } from 'vue';
const props = defineProps<{bgColor: {type: String,default: ''},isBack: {type: [Boolean, String],default: false},bgImage: {type: string,default: ''}
}>()
let CustomBar = ref(0)
const StatusBar = ref(0)
let styleProps=ref('background-image:url('+props.bgImage+');')
let styleBar=ref('')
onLoad(() => {CustomBar.value = uni.getStorageSync('customBar')StatusBar.value = uni.getStorageSync('statusBar')styleBar.value='height:'+CustomBar.value+'px;padding-top:'+StatusBar.value+'px;'if (styleProps) {styleBar.value = styleBar.value+styleProps.value;}
})
const BackPage = () => {// if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {// 	let url = '/' + __wxConfig.pages[0]// 	return uni.redirectTo({url})// }uni.navigateBack({delta: 1});
}
</script><style scoped></style>
  1. 定义为全局组件main.ts
import { createSSRApp } from "vue";
import App from "./App.vue";
import cuCustom from './colorui/components/cu-custom.vue'
import pinia from './stores'
import TopNavigation from "./compontens/topNavigation.vue";export function createApp() {const app = createSSRApp(App);app.component('cu-custom',cuCustom)app.component('top-nav',TopNavigation)app.use(pinia)
// app.config.globalProperties.$httpreturn {app,};
}

3.App.vue获取customBar,statusBar
也可以用pinia存储

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"onLaunch (()=>{uni.getSystemInfo({success: function (e) {let CustomBar=0let StatusBar=0if (e.platform == 'android') {CustomBar = e.statusBarHeight + 50;} else {CustomBar = e.statusBarHeight + 45;};// mp-weixinStatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();CustomBar = custom.bottom + custom.top - e.statusBarHeight + 4;// 这个是MP-ALIPAY// StatusBar = e.statusBarHeight;// CustomBar = e.statusBarHeight + e.titleBarHeight;uni.setStorageSync('customBar',CustomBar)uni.setStorageSync('statusBar',StatusBar)}})})onShow(()=>{console.log('App Show')}),onHide(()=>{console.log('App Hide')})</script>
<style>
/*每个页面公共css */
@import "colorui/main.css";
@import "colorui/icon.css";
</style>
  1. 使用
<template><view><view><top-nav bgColor="bg-greenac70" bgImage="https://iknow-pic.cdn.bcebos.com/b3fb43166d224f4a893e388d1bf790529922d18d"isBack="true"><block slot="backText">返回</block><block slot="content">标题</block></top-nav></view></view></template>

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

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

相关文章

【AI战略思考13】克服懒惰,保持专注,提升效率,不再焦虑

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 引言 我发现自己最近非常懒惰&#xff0c;浪费了很多时间&#xff0c;也容易分心&#xff0c;不够专注&#xff0c;效率低下&#xff0c;且每天都有点焦虑&#xff0c;因此制定了下面的要求和作息时间表。 目…

Unity3D ngui和ugui区别与优缺点详解

前言 Unity3D是一款跨平台的游戏开发引擎&#xff0c;它支持多种平台&#xff0c;包括PC、移动设备和主机。在Unity3D中&#xff0c;UI系统是游戏开发中非常重要的一部分&#xff0c;它负责游戏中的用户界面的显示和交互。 对惹&#xff0c;这里有一个游戏开发交流小组&#…

openssl使用哈希算法生成随机密钥

文章目录 一、openssl中随机数函数**OpenSSL 随机数函数概览**1. **核心随机数函数** **常用函数详解**1. RAND_bytes2. RAND_priv_bytes3. RAND_seed 和 RAND_add4. RAND_status **随机数生成器的熵池****常见用例****注意事项** 二、使用哈希算法生成随机的密钥 一、openssl中…

大模型翻译能力评测

1. 背景介绍 随着自然语言处理技术的飞速发展&#xff0c;机器翻译已经成为一个重要的研究领域。近年来&#xff0c;基于大模型的语言模型在机器翻译任务上取得了显著的进展。这些大模型通常具有数亿甚至数千亿的参数&#xff0c;能够更好地理解和生成自然语言。 但是&#xf…

刷题日常(找到字符串中所有字母异位词,​ 和为 K 的子数组​,​ 滑动窗口最大值​,全排列)

找到字符串中所有字母异位词 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 题目分析&#xff1a; 1.将p里面的字符先丢进一个hash1中&#xff0c;只需要在S字符里面找到多少个和他相同的has…

【汇编语言】call 和 ret 指令(三) —— 深度解析汇编语言中的批量数据传递与寄存器冲突

文章目录 前言1. 批量数据的传递1.1 存在的问题1.2 如何解决这个问题1.3 示例演示1.3.1 问题说明1.3.2 程序实现 2. 寄存器冲突问题的引入2.1 问题引入2.2 分析与解决问题2.2.1 字符串定义方式2.2.2 分析子程序功能2.2.3 得到子程序代码 2.3 子程序的应用2.3.1 示例12.3.2 示例…

青训营-豆包MarsCode技术训练营试题解析九

介绍 ‌豆包青训营‌是由字节跳动和稀土掘金社区共同发起的技术培训和人才选拔项目&#xff0c;主要面向在校大学生。该项目的目标是培养具有职业竞争力的优秀开发工程师&#xff0c;并提供全程免费的课程&#xff0c;不收取任何费用‌。 课程内容和方向 豆包青训营的课程涵…

前端的面试题

1.常用的块与行属性内标签有哪些&#xff1f;有什么特征&#xff1f; 块标签&#xff1a;div、h1~h6、ul、li、table、p、br、form。 特征&#xff1a;独占一行&#xff0c;换行显示&#xff0c;可以设置宽高&#xff0c;可以嵌套块和行 行标签&#xff1a;span、a、img、text…

`asyncio.wait` 和 `asyncio.gather` 的区别

asyncio.wait 和 asyncio.gather 的区别 1. asyncio.wait2. asyncio.gather主要区别总结 在Python的异步编程中&#xff0c;asyncio.wait 和 asyncio.gather 都是用于等待多个异步任务完成的工具&#xff0c;但它们在功能和使用方式上有一些关键的区别。本文将详细解释这两个函…

48-基于单片机的LCD12864时间调控和串口抱站

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机的公交报站系统&#xff0c;可以手动报站&#xff0c;站名十个。 在lcd12864上显示时间&#xff08;年月日时分秒&#xff09;和站名&#xff0c;时间可以设置&#xff0c; 仿真中可以…

如何为 XFS 文件系统的 /dev/centos/root 增加 800G 空间

如何为 XFS 文件系统的 /dev/centos/root 增加 800G 空间 一、前言二、准备工作三、扩展逻辑卷1. 检查现有 LVM 配置2. 扩展物理卷3. 扩展卷组4. 扩展逻辑卷四、调整文件系统大小1. 检查文件系统状态2. 扩展文件系统五、处理可能出现的问题1. 文件系统无法扩展2. 磁盘空间不足3…

爬虫框架快速入门——Scrapy

适用人群&#xff1a;零基础、对网络爬虫有兴趣但不知道从何开始的小白。 什么是 Scrapy&#xff1f; Scrapy 是一个基于 Python 的网络爬虫框架&#xff0c;它能帮助你快速爬取网站上的数据&#xff0c;并将数据保存到文件或数据库中。 特点&#xff1a; 高效&#xff1a;支…

Redis 分布式锁实现方案

一、概述 分布式锁&#xff0c;即分布式系统中的锁。在单体应用中我们通过锁解决的是控制共享资源访问的问题&#xff0c;而分布式锁&#xff0c;就是解决了分布式系统中控制共享资源访问的问题。与单体应用不同的是&#xff0c;分布式系统中竞争共享资源的最小粒度从线程升级…

前端node.js

一.什么是node.js 官网解释:Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。 二.初步使用node.js 需要区分开的是node.js和javascript互通的只有console和定时器两个API. 三.Buffer Buffer 是一个类似于数组的 对象&#xff0c;用于表示固定长度的字节序列。Buffer…

Python中字符串和正则表达式

Python中字符串和正则表达式 在Python编程中&#xff0c;字符串是最常用的数据类型之一。字符串用于表示文本数据&#xff0c;而正则表达式则是一种强大的工具&#xff0c;用于处理和匹配字符串中的模式。本文将介绍Python中的字符串操作、字符串格式化以及如何使用正则表达式…

构造函数与析构函数错题汇总

构造函数不能定义返回类型&#xff0c;也没有返回类型。 堆、栈、静态存储区。栈上的对象main函数结束就释放&#xff0c;堆上的需要手动释放&#xff0c;静态存储区的在所在作用域的程序结束时释放。这里static在main函数内&#xff0c;是局部变量&#xff0c;所以作用域为…

Nginx和Apache有什么异同?

Nginx和Apache都是广泛使用的Web服务器软件&#xff0c;它们各自具有独特的特点和优势&#xff0c;适用于不同的应用场景。以下是关于Nginx和Apache的不同、相同以及使用区别的详细分析&#xff1a; 一、不同点 资源占用与并发处理能力&#xff1a; Nginx使用更少的内存和CPU资…

SQL基础入门——SQL基础语法

1. 数据库、表、列的创建与管理 在SQL中&#xff0c;数据库是一个数据的集合&#xff0c;包含了多个表、视图、索引、存储过程等对象。每个表由若干列&#xff08;字段&#xff09;组成&#xff0c;表中的数据行代表记录。管理数据库和表的结构是SQL的基础操作。 1.1 创建数据…

c语言编程1.17蓝桥杯历届试题-回文数字

题目描述 观察数字&#xff1a;12321&#xff0c;123321 都有一个共同的特征&#xff0c;无论从左到右读还是从右向左读&#xff0c;都是相同的。这样的数字叫做&#xff1a;回文数字。 本题要求你找到一些5位或6位的十进制数字。满足如下要求&#xff1a; 该数字的各个数位之…

亚马逊自研大语言模型 Olympus 即将亮相,或将在 LLM 竞赛中掀起新波澜

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…