six_uniapp_app/src/pageTabBar/Home/Home.vue

<style lang="scss" scoped>
    //@import "@/assets/demo.scss";
    .phone-screen {
        box-sizing: border-box;
        font-size: 28rpx;
        font-family: "xiaoFont", sans-serif;
        height: v-bind(pxScreenHeight);
        //background-image: url("https://hudie.xiao.band/wechatbackimg.png");
        background-size: 750rpx;

        &::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
            color: transparent;
            background-color: transparent;
        }

        .error-wrap {
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .root-container {
            position: relative;
            box-sizing: border-box;
            height: v-bind(pxWindowHeight);

            .status-wifi-nav {
                /*状态栏的高度 这里的值不能动*/
                box-sizing: border-box;
                height: v-bind(statusHeight);
            }
        }


        .scrollTopHeigh {
            /*在滚动区域内的, 可以自定义的高度*/
            box-sizing: border-box;
            //background-color: rgba(255, 255, 255, 0.05);
        }

        .scrollViewHeigh {
            /*滚动页面区域范围*/
            box-sizing: border-box;
            font-size: 1rem;
            overflow: hidden;
            height: v-bind(defaule滚动区域的高度);

            :deep() {
                /*button按钮的 阴影样式可以直接使用*/
                .custom-class-button {
                    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
                }
            }

            .page_1_title {
                height: 382rpx;
            }

            .page_1_chao_hua_shuai {
                height: 400rpx;
            }

            .page_1_chao_hong {
                //height: v-bind(css红包高度);
                //background-color: #40AE36;
            }
        }


    }
</style>
<template>
    <view class="phone-screen">
        <wd-config-provider :theme="theme">
            <view class="root-container">
                <view class="status-wifi-nav">
                    <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
                                    v-model:info_scroll_height="info_scroll_height"
                                    v-model:pxWindowHeight="pxWindowHeight"
                                    v-model:statusHeight="statusHeight"
                                    :modelValue="modelValue" @homeLeft="homeLeft"
                                    @homeRight="homeRight">

                    </ChildComScroll>
                </view>
                <view class="scrollTopHeigh"><!--预留的空间高度--></view>
                <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
                             class="scrollViewHeigh">
                    <view class="page_1_title">
                        <home-com-image></home-com-image>
                    </view>
                    <view class="line-widht-number" style="height: 20rpx"></view>
                    <view class="page_1_chao_hua_shuai">
                        <home-com-chao-hua-shuai></home-com-chao-hua-shuai>
                    </view>
                    <view class="line-widht-number" style="height: 10rpx"></view>
                    <view class="page_1_chao_hong">

                        <home-com-hong-meng :hong-height="info_scroll_height"
                                            :css_com_height="css_com_height"></home-com-hong-meng>
                    </view>
                </scroll-view>
                <view class="scrollBottomHeigh">
                    <!--底部预留区域-->
                </view>
                <!--滚动区域结束-->
            </view>
        </wd-config-provider>
        <wd-toast selector="default-toast"/>
        <wd-message-box selector="default-message-box"/>
    </view>
</template>
<script lang="ts" setup>
    import ChildComScroll from "@/components/ChildComScroll.vue";
    import {ref} from "vue";
    import type {GlobelsChildPropsType} from "@/types/通用类型";
    import {onTabItemTap} from "@dcloudio/uni-app";
    import {useMessage, useToast} from "wot-design-uni";
    import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
    import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
    import HomeComImage from "@/pageTabBar/Home/首页组件图片.vue";
    import HomeComChaoHuaShuai from "@/pageTabBar/Home/首页组件超划算.vue";
    import HomeComHongMeng from "@/pageTabBar/Home/首页组件红包.vue";

    let xiaoMain = useMainXiaoStore();
    defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
    let toast = useToast("default-toast");
    let message = useMessage("default-message-box");
    let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); //  返回值为 dark or linght
    let pxScreenHeight = ref("0rpx"); // 手机高度
    let pxWindowHeight = ref("0rpx"); // 屏幕可视区高度
    let statusHeight = ref(); // 固定的顶部
    let meunHeight = ref();//插槽时要用的 高度
    let info_scroll_height = ref(0);

    const defaule滚动区域的高度 = computed(() => {
        return info_scroll_height.value + "rpx";
    });
    const css红包高度 = computed(() => {
        return info_scroll_height.value - 400 - 382 - 20 - 10 + "rpx";
    });
    const css_com_height = computed(() => {
        return info_scroll_height.value - 400 - 382 - 20 - 10;
    });
    const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
    const modelValue: GlobelsChildPropsType = {
        isShowLeft: {
            showCom: "icon",
            img: {imgLeft: xiao_six_img},
            iconTextLeft: {classPrefix: "wd-icon", name: "app", size: 20},
        },
        isShowRight: {
            showCom: "icon",
            img: {imgRight: xiao_six_img},
            iconTextRight: {classPrefix: "wd-icon", name: "app", size: 20},
        },
        title_text: "六果泡泡", navIsShow: "default",
    };
    const homeLeft = () => {
        wx.vibrateShort({type: "heavy"});//medium heavy light
        uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
    };

    const homeRight = () => {
        wx.vibrateShort({type: "heavy"});//medium heavy light
        console.log("右键按键");
    };
    let defaultSearchChange = async () => {
        await wx.vibrateShort({type: "heavy"});//medium heavy light
        console.log("搜索发起");
    };
    onTabItemTap(() => {
        console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
        wx.vibrateShort({type: "heavy"});//medium heavy light
    });
</script>