uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度

实际效果

使用

//使用
let posConfig = this.getPosConfig(); // 传false返回值为 px大小
console.log(posConfig.safeBottomH)

 

        // 入参 是否转换为rpx
        getPosConfig(toRpx = true) {
				const systemInfo = uni.getSystemInfoSync();
				// #ifdef MP
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// #endif
				const posConfig = {
					statusBarH: systemInfo.statusBarHeight,//状态栏高度
					tabBarH: systemInfo.screenHeight - systemInfo.windowHeight,//底部tab高度
					safeBottomH: systemInfo.safeAreaInsets.bottom,//底部安全高度
					// #ifdef MP
					capsuleH: menuButtonInfo.height, //胶囊高度
					capsuleW: menuButtonInfo.width, //胶囊宽度
					capsuleGap: menuButtonInfo.top - systemInfo.statusBarHeight, // 胶囊到状态栏的间隔
					customBarH: menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2, //自定义导航栏高度
					customBarW: menuButtonInfo.left, // 自定义导航栏宽度
					// #endif
				}
				if (toRpx) {
					const ratio = 750 / systemInfo.windowWidth;
					for (let key in posConfig) {
						posConfig[key] *= ratio;
					}
				}
				return posConfig;
}

### 修改 UniApp 应用中底部导航栏的样式 #### 使用官方底部导航栏并自定义样式 为了创建更加个性化的用户体验,在 UniApp 中可以通过多种方式来自定义底部导航栏。一种方法是基于官方提供的 `tabBar` 组件进行扩展和定制化设计[^1]。 ```json { "usingComponents": {}, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, ... ] } } ``` #### 实现中间凸起样式的 tabBar 对于希望实现特殊效果如中间按钮突出显示的情况,可以利用 CSS 定位属性来调整特定项的位置。通过设置 `.center-item .item-bottom` 的绝对定位,并将其放置于屏幕底部中央位置[^2]: ```css .tabbar-container .center-item .item-bottom { position: absolute; bottom: 0; /* Additional styles */ } ``` #### 页面引入自定义组件 当需要进一步增强功能或改变外观时,可以选择构建自己的 tab-bar 组件并在页面中注册使用它。这通常涉及到在模板文件内声明视图结构以及脚本部分导入相应模块[^3]。 ```html <template> <view> <!-- Other content --> <TabBar /> </view> </template> <script> import TabBar from '@/components/Tabbar/Tabbar.vue' export default { components: { TabBar } } </script> ``` #### 动态加载页面与图标管理 如果项目中有多个不同类型的页面链接到同一个 tab-bar 上,则可能需要用到 Vue 提供的一些工具函数比如 `shallowRef()` 来简化状态管理和提高性能表现。这样做的好处是可以更灵活地控制何时渲染哪个子页面而不必担心不必要的重新计算开销[^4]。 ```javascript // Example of configuring a dynamic item within the tabBar list. { name: shallowRef(Order), pagePath: '../order/order', iconPath: '/static/tabbar/torder.png', selectedIconPath: '/static/tabbar/torder_c.png', text: '订单' } <!-- Usage inside template --> <component :is="data.getItem.name"></component> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值