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

news2025/3/18 12:35:36

这是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.$http
  return {
    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=0
				let StatusBar=0
				if (e.platform == 'android') {
					CustomBar = e.statusBarHeight + 50;
				} else {
					CustomBar = e.statusBarHeight + 45;
				};
				// mp-weixin
				StatusBar = 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>