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>
相关推荐
小岛前端2 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序
风清云淡_A2 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin2 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske2 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
從南走到北5 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心11 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员12 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio12 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q51100828513 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk13 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar