appYanHua/src/subPackages/homeSubPages/搜索页面/搜索页面.vue

<style lang="scss" scoped>
// @import "@/assets/demo.scss";

$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
$xiaoBottomHeigh: 1px; // 滚动区域外,可以预留的高度


@mixin line-color {
    @keyframes gradientFlow {
        0%, 100% {
            background-position: 0 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
    background-size: 400% 100%;
    animation: gradientFlow 5s ease infinite;
}

.phone-screen {
    box-sizing: border-box;
    font-size: 26rpx;
    font-family: "xiaoFont", sans-serif;
    height: v-bind(pxScreenHeight);
    
    //&::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; color: transparent; }
    
    .root-window {
        width: 750rpx;
        position: relative;
        box-sizing: border-box;
        height: v-bind(pxWindowHeight);
        
        .status-wifi-nav {
            box-sizing: border-box;
            height: v-bind(statusHeight);
            
            :deep(.default-view-slot) {
                font-size: 26rpx;
                line-height: v-bind(meunHeight);
                display: flex;
                align-items: center;
                height: v-bind(meunHeight);
                text-align: center;
                
                .default-view-slot-left {
                    flex: 1;
                }
                
                .default-view-slot-right {
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx;
                    border: 1px rgba(255, 255, 255, 0.03) solid;
                    border-radius: calc(v-bind(meunHeight) / 2);
                    
                    .title-imgimage_item {
                        width: calc(v-bind(meunHeight) * 0.7);
                        height: calc(v-bind(meunHeight) * 0.7);
                    }
                }
                
                .default-view-slot-right-text {
                    font-weight: 800;
                }
                
            }
        }
    }
    
    
}

.scrollTopHeigh {
    /*在滚动区域内的, 可以自定义的高度*/
    box-sizing: border-box;
    height: $defaultTopHeight;
    
}

/* 滚动区域的内容区域 */
.scrollViewHeigh {
    box-sizing: border-box;
    height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
    //overflow: hidden;
    
    .page-xiao-page {
    
    
    }
    
    
}

/* 最底部的区域,脱离滚动区域 */
.scrollBottomHeigh {
    width: 750rpx;
    box-sizing: border-box;
    height: $xiaoBottomHeigh;
}

</style>
<template>
    <view class="phone-screen">
        <wd-config-provider theme="dark">
            <view class="root-window">
                <view class="status-wifi-nav">
                    <ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
                                    v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
                                    v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
                                    @homeRight="homeRight">
                        <template v-slot:default>
                            <view class="default-view-slot" @click="defaultSearchChange">
                                <view class="default-view-slot-left">1</view>
                                <view class="default-view-slot-right">
                                    <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
                                           v-bind:src="icon_img" webp/>
                                    <view class="default-view-slot-right-text">搜索</view>
                                </view>
                                <view class="line-widht-number" style="width: 30rpx"></view>
                            </view>
                        </template>
                    </ChildComScroll>
                </view>
                <!--分隔线,上面的是子组件-->
                <view class="scrollTopHeigh"><!--预留的空间高度--></view>
                <!-- 滚动区域开始-->
                <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
                             class="scrollViewHeigh">
                    <view class="page-xiao-page">
                        搜索页面
                    </view>
                </scroll-view>
                <!--滚动区域结束-->
                <view class="scrollBottomHeigh"><!--底部预留区域--></view>
            </view>
        </wd-config-provider>
    </view>
</template>
<script lang="ts">export default {options: {virtualHost: true}};</script>
<script lang="ts" setup>
import ChildComScroll from "@/components/ChildComScroll.vue";
import type {GlobelsChildPropsType} from "@/stores/requestFile";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";


defineOptions({options: {styleIsolation: "shared"}});
let icon_img = "https://oss.jpyanhua.site/%E7%83%9F%E8%8A%B1%E9%A1%B9%E7%9B%AE/search.png";
let pxScreenHeight = ref(); // 手机高度
let pxWindowHeight = ref(); // 屏幕可视区高度
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
const modelValue: GlobelsChildPropsType = {
    isShowLeft: {
        showCom: "icon",
        img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
        iconTextLeft: {classPrefix: "wd-icon", name: "arrow-left", size: 22},
    },
    isShowRight: {
        showCom: "icon",
        img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
        iconTextRight: {classPrefix: "wd-icon", name: "", size: 20},
    },
    title_text: "", navIsShow: "default",
};
onLoad(() => {
    // 禁用分享的设置
    wx.hideShareMenu();
    wx.offCopyUrl();
});
const homeLeft = () => {
    uni.navigateBack({delta: 1}).then().catch(() => uni.navigateTo({url: ""}));
};
const homeRight = () => {
    console.log("右键按键");
};
let defaultSearchChange = async () => {
    //     点击自定义插槽的 搜索事件
    console.log("搜索发起");
};


</script>