uniapp的vue3版本使用colorUI的自定义导航栏

最新推荐文章于 2025-03-04 02:53:03 发布

Mr_simoon

最新推荐文章于 2025-03-04 02:53:03 发布

阅读量1.7k

点赞数 3

分类专栏： VUE系列文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/mr_simoon/article/details/129206202

版权

文章详细介绍了如何在uni-app项目中结合Vue3使用colorui框架，步骤包括下载colorui并导入项目，通过main.js注册cu-custom组件，然后在app.vue中获取系统信息以设置不同平台的导航栏高度，并在pages.json中取消原生导航栏，实现自定义导航栏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤：

1.下载colorui，将colorui文件导入项目根目录

2.main.js 引入cu-custom组件全局使用


import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  //  vue3使用app.component 注册为全局组件
  app.component('cu-custom',cuCustom)
  
  return {
    app
  }
}

3.app.vue 获取系统信息，设置导航栏高度

<script lang="ts" setup>

	import { getCurrentInstance } from 'vue'
		
  onLaunch(() => {
    
	
	//导航栏高度
	uni.getSystemInfo({
	        success: function(e) {
			// 获取 appContext  上下文
			const {appContext} = getCurrentInstance()
			console.log('StatusBar',a