当前位置：首页 > news >正文

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

news 2025/7/10 11:33:41

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

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

新建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>

定义为全局组件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>

使用

<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>