uni-app vue3获取 小程序胶囊最新的方法

1.第一步app.vue

<script setup>
	
	import { onLaunch } from '@dcloudio/uni-app';
	onLaunch(()=>{
		// 获取胶囊按钮的位置
		const buttonPositon = uni.getStorageSync('buttonPositon')
		if(!buttonPositon){
			const res = uni.getMenuButtonBoundingClientRect()
			console.log(res)
			uni.setStorageSync('buttonPositon',res) 
		}
		
	})
</script>
  
<style>
	/*每个页面公共css */
	view,text{
		display: block;
		font-size: 33rpx;
	}
	image{
		display: block;
	}    
	button::after{
		border: none;
	}
	button{
		padding: 0;
		margin: 0;
		line-height: inherit;
		background-color: #fff;
	}
</style>

2。第二步创建一个公用api 文件

文件里面

import { reactive } from "vue"
// 获取胶囊按钮的位置

export const buttonPosition = ()=>{
	const buttonData = reactive({
		  but_height:'0px',
		  but_top:'0px',
		  but_button:'0px' 
	})
	const {height,bottom,top} = uni.getStorageSync('buttonPositon')
	buttonData.but_height = height + 'px',
	buttonData.but_button = bottom + 'px',
	buttonData.but_top = top + 'px'
	return {
		but_height:buttonData.but_height,
		but_top:buttonData.but_top,
		but_button:buttonData.but_button
	}
}

4步引入用

 <template>
	 <!-- 顶部导航切换 -->
	<view class="menu-page">
		<view class="button-top">
			
		</view>
		<view class="menu-style">
			<text v-for="(item,index) in menu" :key="index">{{item}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	// 胶囊按钮坐标
	import {buttonPosition} from '@/api/component-api.js'
	const {but_height,but_top,but_button} = buttonPosition()
	const menu = ref(['我的','对话','AI绘画'])
</script> 
  
<style lang="less">
	page{
		background-color: #f3f3f3;
	}
	.menu-page{
		background: linear-gradient(#fce7cc,#f3f3f3);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999; 
		.button-top{
			height: v-bind('but_top');
		}
		.menu-style{
			display: flex;
			align-items: center; 
			height: v-bind('but_height');
		}
	}
</style>