uniapp自定义小程序头部兼容各种机型

最新推荐文章于 2025-02-15 02:08:16 发布

boldiy

最新推荐文章于 2025-02-15 02:08:16 发布

阅读量369

点赞数 2

文章标签： uni-app 小程序 apache

本文链接：https://blog.youkuaiyun.com/boldiy/article/details/138314447

版权

<view :style="{'height':statusBarHeight+'px'}"></view>
        <view class="micro-head" :style="{'height':microButtonHeight+'px'}">
            <view class="back-btn" @click="backClick">
                <uni-icons class="icon" type="arrow-left" size="32" color="white"></uni-icons>
        </view>
  </view>

getTopIconDistance() {
                uni.getSystemInfo({
                    success: (res) => {
                        // 获取手机顶部状态栏的高度
                        const statusBarHeight = res.statusBarHeight || 0;

                        // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
                        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
                        const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
                            2;

                        // 计算顶部图标距离
                        const topIconDistance = statusBarHeight + navBarHeight;

                        //小程序胶囊占高度
                        const microButtonHeight = menuButtonInfo.height+((menuButtonInfo.top - statusBarHeight)*2)

                        // 打印顶部图标距离
                        uni.showToast({
                            title: '顶部距离:' + topIconDistance
                        });

                        this.safeAreaInsets = topIconDistance;
                        this.microButtonHeight = microButtonHeight;
                        this.statusBarHeight = statusBarHeight;
                    },
                    fail: (err) => {
                        console.error('获取系统信息失败:', err);
                    },
                });
            }

    .micro-head {
        display: flex;
        align-items: center;
    }

    .back-btn {
        margin-left:6px;
        height: 32px;
        width: 32px;
    }