uniapp vue3 微信小程序获取状态栏高度和右上角设置（胶囊按钮）高度

最新推荐文章于 2024-06-18 10:28:11 发布

我总是词不达意

最新推荐文章于 2024-06-18 10:28:11 发布

阅读量2.3k

点赞数 1

分类专栏：前端 vue3 uniapp 文章标签：微信小程序 uni-app 小程序 vue.js 前端

本文链接：https://blog.csdn.net/weixin_43743175/article/details/126753631

版权

前端同时被 3 个专栏收录

86 篇文章 3 订阅

订阅专栏

25 篇文章 1 订阅

订阅专栏

uniapp

17 篇文章 0 订阅

订阅专栏

关闭原生的顶部栏

// pages.json

"pages": [{
    "path": "pages/home/index",
    "style": {
        "navigationStyle": "custom",
        "app-plus": {
            "titleView": false
        }
    }
},
}]

页面加载时获取胶囊高度和状态栏高度

<template>
	<view class="bg">
		<view :style="{ paddingTop: topPadding }"></view>
	</view>
</template>

<script setup>
  import {
    ref,
    reactive,
    toRefs,
    onBeforeMount,
    onMounted,
    onUpdated,
    onBeforeUpdate,
    onBeforeUnmount,
    onUnmounted,
    computed,
    watch,
  }
  from 'vue'import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom,
  }
  from '@dcloudio/uni-app'
    let topPadding = ref('0px') 
    const getHeight = () = >{
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight,
    customHeight = wx.getMenuButtonBoundingClientRect(),
    navigationBarHeight = customHeight.height + (customHeight.top - statusBarHeight) * 2 
    topPadding.value = `$ {navigationBarHeight + statusBarHeight}px`
    console.log(statusBarHeight, customHeight, topPadding)
  }
  onLoad(() = >{
    getHeight()
  })
</script>