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

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

color-ui(https://docs.xzeu.com/#/)

  1. 新建component文件夹创建topNavigation.vue
c 复制代码
<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
c 复制代码
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存储

c 复制代码
<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>
  1. 使用
c 复制代码
<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>
相关推荐
右子3 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
木易 士心5 小时前
Uni-App 实现多身份动态切换 TabBar 指南
uni-app
江城开朗的豌豆6 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆6 小时前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
毕设源码-江学长7 小时前
计算机毕业设计java共享茶室预约微信小程序 微信小程序中的共享茶室预订平台 茶室共享预约小程序的设计与开发
java·微信小程序·课程设计
说私域21 小时前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106321 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
云起SAAS2 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app