six_uniapp_app/src/components/ChildComScroll.vue

<style scoped lang="scss">
    .child {
        height: v-bind(整个高度_rpx);
        position: fixed;
        width: 750rpx;
        top: 0;
        left: 0;
        background-color: transparent;
        z-index: 100;
    }

    .wifi-status {
        height: v-bind(wifi_height高度_rpx);
    }

    .status-top {
        height: v-bind(statusTop高度差_rpx);
    }

    .status-bottom {
        //background-color: green;
        height: v-bind(statusTop高度差_rpx);
    }

    .status-status {
        height: v-bind(statusHeight状态栏高度);
        display: grid;
        grid-template-columns: v-bind(lef左侧的距离) v-bind(menu胶囊宽度) v-bind(content宽度);

        .status-status-left {
            width: v-bind(lef左侧的距离);
            height: v-bind(statusHeight状态栏高度);
        }

        .status-status-menu {
            // 胶囊
            height: v-bind(statusHeight状态栏高度);
            width: v-bind(menu胶囊宽度);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: v-bind(statusHeight状态栏高度);
            align-items: center;

            .status-status-menu-left {
                height: v-bind(statusHeight状态栏高度);
                display: flex;
                justify-content: center;
                align-items: center;

                .meun-widht-rightimage_item {
                    height: calc(v-bind(statusHeight状态栏高度) * 0.75);
                    width: calc(v-bind(statusHeight状态栏高度) * 0.75);
                }
            }

            .status-status-menu-right {
                display: flex;
                height: v-bind(statusHeight状态栏高度);
                justify-content: center;
                align-items: center;

                .meun-widht-rightimage_item {
                    height: calc(v-bind(statusHeight状态栏高度) * 0.75);
                    width: calc(v-bind(statusHeight状态栏高度) * 0.75);
                }
            }
        }

        .status-status-content {
            height: v-bind(statusHeight状态栏高度);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
<template>
    <view class="child">
        <view class="wifi-status"></view>
        <view class="status-top"></view>
        <view class="status-status">
            <view class="status-status-left"></view>
            <view class="status-status-menu">
                <view class="status-status-menu-left" @click="emit('homeLeft')">
                    <wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'"
                             :classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix"
                             :name="modelValue?.isShowLeft.iconTextLeft.name"
                             :size="modelValue?.isShowLeft.iconTextLeft.size"
                             custom-class="customClass-icon"
                    ></wd-icon>
                    <image v-if="modelValue?.isShowLeft.showCom==='img'" :src="modelValue.isShowLeft.img.imgLeft"
                           class="meun-widht-rightimage_item"
                           mode="scaleToFill" webp></image>
                </view>
                <view class="status-status-menu-right" @click="emit('homeRight')">
                    <wd-icon v-if="modelValue?.isShowRight.showCom==='icon'"
                             :classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix"
                             :name="modelValue?.isShowRight.iconTextRight.name"
                             :size="modelValue?.isShowRight.iconTextRight.size"
                             custom-class="customClass-icon"
                    ></wd-icon>
                    <image v-if="modelValue?.isShowRight.showCom==='img'" :src="modelValue.isShowRight.img.imgRight"
                           class="meun-widht-rightimage_item"
                           mode="scaleToFill" webp></image>
                </view>
            </view>
            <view class="status-status-content">{{ modelValue.title_text }}</view>
        </view>
        <view class="status-bottom"></view>
    </view>
</template>
<script setup lang="ts">
    import {useVModels} from "@vueuse/core";
    import {computed} from "vue";
    import type {GlobelsChildPropsType} from "@/types/通用类型";

    interface definePropsType {
        modelValue: GlobelsChildPropsType;// 对象类型的 prop
        statusHeight: string;
        pxScreenHeight: string;
        pxWindowHeight: string;//pxWindowHeight
    }

    // 2. 使用 withDefaults 定义默认值
    const props = withDefaults(defineProps<definePropsType>(), {});
    const emit = defineEmits<{
        (eventName: "update:modelValue", value: string): void
        (eventName: "update:statusHeight", value: string): void
        (eventName: "update:pxScreenHeight", value: string): void
        (eventName: "update:pxWindowHeight", value: string): void
        (eventName: "homeLeft",): void
        (eventName: "homeRight",): void
    }>();
    const {modelValue, statusHeight, pxWindowHeight, pxScreenHeight} = useVModels(props, emit); // 这里是将整个全包在里面了
    const info_window = wx.getWindowInfo();
    const pix = 750 / info_window.windowWidth;
    const wifi_height高度 = computed(() => {
        return wx.getWindowInfo().statusBarHeight * pix;
    });
    const menuButton对象 = wx.getMenuButtonBoundingClientRect();
    const statusTop高度差 = menuButton对象.top * pix - wifi_height高度.value;
    const wifi_height高度_rpx = computed(() => {
        return wifi_height高度.value + "rpx";
    });
    const statusTop高度差_rpx = computed(() => {
        if (statusTop高度差 < 0) {
            return 0 + "rpx";
        }
        if (statusTop高度差 > 0) {
            return statusTop高度差 + "rpx";
        }
    });
    const menu胶囊的高度 = computed(() => {
        if (statusTop高度差 < 0) {
            // return (menuButton对象.height * pix + statusTop高度差);
            return (menuButton对象.height * pix + statusTop高度差 * 2);
        } else {
            return (menuButton对象.height * pix);
        }
    });
    const statusHeight状态栏高度 = menu胶囊的高度.value + "rpx";
    const 整个高度 = computed(() => {
        if (statusTop高度差 < 0) {
            return wifi_height高度.value + menu胶囊的高度.value;
        } else {
            return wifi_height高度.value + menu胶囊的高度.value + statusTop高度差 * 2;
        }
    });
    const 整个高度_rpx = 整个高度.value + "rpx";
    statusHeight.value = 整个高度_rpx;

    if (modelValue.value.navIsShow === "none") {
        statusHeight.value = "0rpx";
    }
    if (modelValue.value.navIsShow === "default") {
        statusHeight.value = 整个高度_rpx;
    }
    const lef左侧的距离 = 750 - menuButton对象.right * pix + "rpx";
    const menu胶囊宽度 = menuButton对象.width * pix + "rpx";
    const content宽度 = 750 - (750 - menuButton对象.right * pix) * 2 - (menuButton对象.width * pix) * 2 + "rpx";
    const window屏幕可用高度 = computed(() => {
        if (info_window.screenHeight === info_window.windowHeight) {
            return (info_window.screenHeight - (info_window.screenHeight - info_window.safeArea.bottom)) * pix;
        } else {
            return info_window.windowHeight * pix;
        }
    });
    pxScreenHeight.value = info_window.screenHeight * pix + "rpx";
    pxWindowHeight.value = window屏幕可用高度.value + "rpx";
</script>