123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <template>
- <view class="" :style="`paddingTop:${heights}px;`" style="width: 750rpx;">
- <view class="tab">
- <view class="">
- {{text}}
- </view>
- </view>
- </view>
- </template>
- <script setup>
- import { ref } from 'vue'
- const text = ref()// tab的文字内容
- const heights = ref('20')//顶部高度(以胶囊底部为准)
- // let top = ref()//胶囊顶部距离顶部高度
- // const jiaoNang = ref()//获取胶囊位置信息
- // 获取页面传来的tab内容
- const props = defineProps({
- text: {
- type: String,
- },
- })
- text.value = props.text
- // // 获取顶部胶囊位置
- // jiaoNang.value = uni.getMenuButtonBoundingClientRect()
- // // 保存胶囊底部到屏幕顶部高度
- // heights.value = jiaoNang.value.height + jiaoNang.value.top
- // // 保存胶囊顶部到屏幕顶部高度
- // top.value = jiaoNang.value.top
- const getPhoneInfo = () => {
- const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
- // let statusBarObj = {
- // statusBarHeight: 20
- // }
- // 设置状态栏高度(H5顶部无状态栏小程序有状态栏需要撑起高度)
- console.log(phoneInfo,'高度信息啊')
- heights.value = phoneInfo.statusBarHeight;
- }
- getPhoneInfo()
-
- </script>
- <style lang="scss">
- .tab {
-
- // position: fixed;
- // top: 0;
- // left: 0;
- text-align: center;
- overflow: hidden;
- background-color: #fff;
- color: #333;
- // z-index: 10000;
- width: 750rpx;
- height: 90rpx;
- line-height: 90rpx;
- }
- </style>
|