uniapp微信小程序计算状态栏和导航栏高度

记录一下开发过程中吸顶涉及用到的一个计算

// 状态栏高度
const statusHeight = uni.getSystemInfoSync().statusBarHeight;

// 导航栏信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 导航栏高度--导航栏高度默认44
const navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusHeight) * 2;

// 状态栏高度+导航栏高度
const stickyHeight = statusHeight + navHeight;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在uniapp中自定义微信小程序导航,你可以按照以下步骤进行操作: 1. 在 `App.vue` 中添加 `onLaunch` 方法,用于获取设备信息: ``` onLaunch: function() { uni.getSystemInfo({ success: function(res) { uni.$systemInfo = res; } }); } ``` 2. 在 `pages.json` 中添加 `navigationStyle` 属性,用于设置导航样式为自定义: ``` { "pages": [ { "path": "pages/home/home", "style": { "navigationStyle": "custom" } } ] } ``` 3. 在需要自定义导航的页面中,添加一个自定义导航组件: ``` <template> <view class="custom-navigation-bar"> <view class="custom-navigation-bar-left" @click="back"> <image src="/static/arrow_left.png" mode="widthFix" /> </view> <view class="custom-navigation-bar-title">{{title}}</view> </view> </template> <script> export default { props: { title: { type: String, default: '' } }, methods: { back() { uni.navigateBack({ delta: 1 }); } } }; </script> <style scoped> .custom-navigation-bar { position: fixed; top: 0; left: 0; width: 100%; height: uni.$systemInfo.statusBarHeight + 44px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); z-index: 999; } .custom-navigation-bar-left { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .custom-navigation-bar-title { font-size: 18px; font-weight: bold; color: #333; text-align: center; } </style> ``` 4. 在需要自定义导航的页面中,引入自定义导航组件,并将页面标题传入组件中: ``` <template> <view> <custom-navigation-bar title="自定义导航"></custom-navigation-bar> <view class="content">页面内容</view> </view> </template> <script> import CustomNavigationBar from '@/components/CustomNavigationBar'; export default { components: { CustomNavigationBar } }; </script> <style scoped> .content { margin-top: uni.$systemInfo.statusBarHeight + 44px; padding: 16px; } </style> ``` 这样,你就可以在uniapp微信小程序中自定义导航了。需要注意的是,在自定义导航组件中,需要通过 `uni.$systemInfo.statusBarHeight` 获取状态栏高度,并根据状态栏高度调整自定义导航高度和位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值