xiao/six_uniapp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

six_uniapp_0003(更新通用的子组件语法)

Browse Source
This commit is contained in:
doudou201703
2026-08-17 23:35:30 +08:00
parent d14b70ad24
commit 205e074238
11 changed files with 954 additions and 1025 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChildComScroll.vue
+136 -302
View File
@@ -1,138 +1,87 @@
<style lang="scss" scoped> <style scoped lang="scss">
.child {
height: v-bind(整个高度_rpx);
.phoneCom {
position: fixed; position: fixed;
width: 750rpx; width: 750rpx;
top: 0; top: 0;
left: 0; left: 0;
background-color: transparent; background-color: transparent;
z-index: v-bind(zIndex); z-index: 100;
}
.phone-wifi { .wifi-status {
height: v-bind(wifi_px); 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状态栏高度);
} }
.phone-nav { .status-status-menu {
height: v-bind(nav_px_height); // 胶囊
box-sizing: border-box; height: v-bind(statusHeight状态栏高度);
display: flex; width: v-bind(menu胶囊宽度);
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: v-bind(statusHeight状态栏高度);
align-items: center; align-items: center;
.meun-height { .status-status-menu-left {
height: v-bind(meun_px_height); height: v-bind(statusHeight状态栏高度);
width: 750rpx;
display: flex; display: flex;
justify-content: center;
align-items: center;
.uniui-left { .meun-widht-rightimage_item {
width: v-bind(rpxLeftWidth); height: calc(v-bind(statusHeight状态栏高度) * 0.75);
display: flex; width: calc(v-bind(statusHeight状态栏高度) * 0.75);
height: v-bind(meun_px_height);;
} }
}
.meun-widht-left { .status-status-menu-right {
width: v-bind(divMeunWidht); display: flex;
height: v-bind(meun_px_height); height: v-bind(statusHeight状态栏高度);
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center;
position: relative;
:deep(.customClass-icon) { .meun-widht-rightimage_item {
height: v-bind(meun_px_height); height: calc(v-bind(statusHeight状态栏高度) * 0.75);
width: calc(v-bind(statusHeight状态栏高度) * 0.75);
text-align: center;
line-height: v-bind(meun_px_height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
.meun-widht-rightimage_item {
height: v-bind(imgWidthHeight);
width: v-bind(imgWidthHeight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
}
.meun-widht-middle {
width: v-bind(divMeunWidhtMiddle);
background-color: rgba(255, 255, 255, 0.1);
align-self: center;
height: calc(v-bind(flexMeunHeight) * 0.8);
&.light-background {
background-color: #555555;
height: calc(v-bind(flexMeunHeight) * 0.8);
align-self: center;
width: v-bind(divMeunWidhtMiddle);
}
}
.meun-widht-right {
width: v-bind(divMeunWidht);
height: v-bind(meun_px_height);;
position: relative;
display: flex;
justify-content: center;
align-items: center;
:deep(.customClass-icon) {
height: v-bind(meun_px_height);
text-align: center;
line-height: v-bind(meun_px_height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
.meun-widht-rightimage_item {
height: v-bind(imgWidthHeight);
width: v-bind(imgWidthHeight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
}
.FlexTitleWidth {
width: v-bind(rpxFlexTitleWidth);
text-align: center;
display: flex;
align-items: center;
height: v-bind(meun_px_height);
.flex-title-text {
width: v-bind(rpxFlexTitleWidth);
height: v-bind(meun_px_height);
line-height: v-bind(meun_px_height);
}
.flex-title-slot {
width: v-bind(rpxFlexTitleWidth);
height: v-bind(meun_px_height);
}
} }
} }
} }
}
.status-status-content {
height: v-bind(statusHeight状态栏高度);
display: flex;
justify-content: center;
align-items: center;
}
}
</style> </style>
<template> <template>
<view class="phoneCom"> <view class="child">
<view class="phone-wifi"> <view class="wifi-status"></view>
<view class="status-wifi"></view> <view class="status-top"></view>
</view> <view class="status-status">
<view v-if="navShow" class="phone-nav"> <view class="status-status-left"></view>
<view class="meun-height"> <view class="status-status-menu">
<view class="uniui-left"></view> <view class="status-status-menu-left" @click="emit('homeLeft')">
<view class="meun-widht-left" @click="emit('homeLeft')">
<wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'" <wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'"
:classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix" :classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix"
:name="modelValue?.isShowLeft.iconTextLeft.name" :name="modelValue?.isShowLeft.iconTextLeft.name"
@@ -143,9 +92,7 @@
class="meun-widht-rightimage_item" class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image> mode="scaleToFill" webp></image>
</view> </view>
<view class="meun-widht-middle" :class="{'light-background':theme==='light'}"></view> <view class="status-status-menu-right" @click="emit('homeRight')">
<view class="meun-widht-right" @click="emit('homeRight')">
<!-- <wd-icon custom-class="customClass-icon" name="thin-arrow-left" size="18px"></wd-icon>-->
<wd-icon v-if="modelValue?.isShowRight.showCom==='icon'" <wd-icon v-if="modelValue?.isShowRight.showCom==='icon'"
:classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix" :classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix"
:name="modelValue?.isShowRight.iconTextRight.name" :name="modelValue?.isShowRight.iconTextRight.name"
@@ -156,201 +103,88 @@
class="meun-widht-rightimage_item" class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image> mode="scaleToFill" webp></image>
</view> </view>
<view class="FlexTitleWidth">
<view v-if="titleViewShow" class="flex-title-text">{{ modelValue?.title_text }}</view>
<view v-if="slotViewShow" class="flex-title-slot">
<slot name="default"></slot>
</view>
</view>
</view> </view>
<view class="status-status-content">{{ modelValue.title_text }}</view>
</view> </view>
<view class="status-bottom"></view>
</view> </view>
</template> </template>
<script setup lang="ts">
<script lang="ts" setup> import {useVModels} from "@vueuse/core";
import {computed, ref, watchEffect} from "vue"; import {computed} from "vue";
import {onShow} from "@dcloudio/uni-app";
import type {GlobelsChildPropsType} from "@/types/通用类型"; import type {GlobelsChildPropsType} from "@/types/通用类型";
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
defineOptions({
options: {
styleIsolation: "shared",
virtualHost: true,
},
});
const emit = defineEmits<{
(eventName: "update:pxWindowHeight", value: string): void
(eventName: "update:pxScrollHeight", value: string): void
(eventName: "update:pxScreenHeight", value: string): void
(eventName: "update:pxWifiNavHeight", value: string): void
(eventName: "update:statusHeight", value: string): void
(eventName: "update:meunHeight", value: string): void
(eventName: "homeRight"): void
(eventName: "homeLeft"): void
}>();
//
interface definePropsType { interface definePropsType {
modelValue?: GlobelsChildPropsType, //跟v-model=值没有关系 modelValue: GlobelsChildPropsType;// 对象类型的 prop
zIndex?: number 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;
const props = withDefaults(defineProps<definePropsType>(), { if (modelValue.value.navIsShow === "none") {
zIndex: () => (100), statusHeight.value = "0rpx";
}); }
const info_window = uni.getWindowInfo(); if (modelValue.value.navIsShow === "default") {
let pxToRpxScale = 750 / info_window.windowWidth; statusHeight.value = 整个高度_rpx;
let meun = uni.getMenuButtonBoundingClientRect(); }
let meun_px_height = computed(() => { const lef左侧的距离 = 750 - menuButton对象.right * pix + "rpx";
return meun.height - 2 + "px"; const menu胶囊宽度 = menuButton对象.width * pix + "rpx";
}); const content宽度 = 750 - (750 - menuButton对象.right * pix) * 2 - (menuButton对象.width * pix) * 2 + "rpx";
// 计算当前 wifi的高度 const window屏幕可用高度 = computed(() => {
let wifiHeing = computed(() => { if (info_window.screenHeight === info_window.windowHeight) {
// 当前wifi的高度 也是分为两种情况下 为负数的时候 小于0 的时候我们就需要减少 wifi的高度,这样才能正确留空 return (info_window.screenHeight - (info_window.screenHeight - info_window.safeArea.bottom)) * pix;
if (meun.top - info_window.statusBarHeight < 0) { } else {
let num = meun.top - info_window.statusBarHeight; return info_window.windowHeight * pix;
return info_window.statusBarHeight - Math.abs(num) * 2;
}
return info_window.statusBarHeight;
});
// 默认的一些宽度
let rpxLeftWidth = computed(() => {
return (info_window.windowWidth - meun.right) * pxToRpxScale + "rpx";
});
let pxMeunHeight = computed(() => {
return meun.height + "px";
});
let rpxFlexTitleWidth = computed(() => {
return (meun.left - meun.width - (info_window.windowWidth - meun.right)) * pxToRpxScale + "rpx";
});
let divMeunWidht = computed(() => {
// 胶囊的一半宽度
const halfWidth = Math.ceil(meun.width / 2) - 1;
return halfWidth * pxToRpxScale + "rpx";
});
let flexMeunHeight = computed(() => {
return Math.ceil(meun.height) * 0.6 + "px";
});
let divMeunWidhtMiddle = computed(() => {
return "1px";
// return 2 * pxToRpxScale + "rpx";
});
let imgWidthHeight = computed(() => {
return Math.ceil(meun.height * 0.7 * pxToRpxScale) + "rpx";
});
let wifi_px = computed(() => {
return wifiHeing.value + "px";
});
// 计算当前导航栏的高度
let navHeight = computed(() => {
// 导航栏高度 = 胶囊高度 + (胶囊顶部距离 - wifi高度)*2
// 这里逻辑也得分二种情况第一情况,减下来值小0 和大于0
if (meun.top - info_window.statusBarHeight > 0) {
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
}
if (meun.top - info_window.statusBarHeight <= 0) {
return meun.height + Math.abs(meun.top - info_window.statusBarHeight) * 2;
}
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
});
let nav_px_height = computed(() => {
return navHeight.value + "px";
});
// 计算可视区域的高度
let windowHeight = computed(() => {
// 可视区高度 = 屏幕高度 - 可视区域的高度 还需要判断 二 种情况, 一种是有tab, 一种是没有tab的情况
// 没有tab栏的情况
if (info_window.screenHeight - info_window.windowHeight === 0) {
if (info_window.safeAreaInsets.bottom > 0) {
// 这是苹果手机的状态(直接返回高度就可以了)
return info_window.screenHeight - info_window.safeAreaInsets.bottom;
}
if (info_window.safeAreaInsets.bottom === 0) {
// 这是没有底部安全栏高度时的(华为手机,苹果5678o)
return info_window.screenHeight - 34;
}
}
if (info_window.screenHeight - info_window.windowHeight > 0) {
return info_window.windowHeight;
}
return info_window.windowHeight;
});
// 实时给出高度
let wifiShow = ref(true);
let navShow = ref(true);
let titleViewShow = ref(true);
let slotViewShow = ref(false);
onShow(() => {
emit("update:meunHeight", pxMeunHeight.value);
});
watchEffect(() => {
emit("update:pxScreenHeight", info_window.screenHeight + "px");
if (props.modelValue?.navIsShow === "default") {
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return (wifiHeing.value + navHeight.value) + "px";
});
let pxScrollHeight = computed(() => {
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "wifi") {
// 此时的导航栏高度 = wifi+nav的高度
navShow.value = false;
let staus = computed(() => {
return (wifiHeing.value) + "px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "none") {
navShow.value = true;
wifiShow.value = false;
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return "0px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "slot") {
slotViewShow.value = true;
titleViewShow.value = false;
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return (wifiHeing.value + navHeight.value) + "px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
} }
}); });
pxScreenHeight.value = info_window.screenHeight * pix + "rpx";
pxWindowHeight.value = window屏幕可用高度.value + "rpx";
</script> </script>
src/pageTabBar/Home/Home.vue
+48 -44
View File
@@ -107,41 +107,40 @@
} }
} }
.grit-content {
.scrollTopHeigh { height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
/*在滚动区域内的, 可以自定义的高度*/ display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box; box-sizing: border-box;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
//background-color: rgba(255, 255, 255, 0.05);
}
.scrollViewHeigh { .scrollViewHeigh {
/*滚动页面区域范围*/ /*滚动页面区域范围*/
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh}); overflow: hidden;
overflow: hidden;
:deep() { :deep() {
/*button按钮的 阴影样式可以直接使用*/ /*button按钮的 阴影样式可以直接使用*/
.custom-class-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%); 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%);
}
} }
} }
.scrollBottomHeigh {
box-sizing: border-box;
height: 1px;
@include line-color();
}
} }
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
.fixed-is-show {
transition: opacity 0.3s ease, transform 0.3s ease;
}
} }
</style> </style>
@@ -150,9 +149,10 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <template v-slot:default>
<view class="default-view-slot" @click="defaultSearchChange"> <view class="default-view-slot" @click="defaultSearchChange">
@@ -166,23 +166,27 @@
</view> </view>
</template> </template>
</ChildComScroll> </ChildComScroll>
</view>
<view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="page">
<view class="line-widht-number" style="height: 5rpx"></view>
<home-com-title></home-com-title>
<view class="line-widht-number" style="height: 15rpx"></view>
<home-com-chao-hua-shuai></home-com-chao-hua-shuai>
<view class="line-widht-number" style="height: 20rpx"></view>
<home-com-hong-meng></home-com-hong-meng>
</view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
</view> </view>
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="page">
<view class="line-widht-number" style="height: 5rpx"></view>
<home-com-title></home-com-title>
<view class="line-widht-number" style="height: 15rpx"></view>
<home-com-chao-hua-shuai></home-com-chao-hua-shuai>
<view class="line-widht-number" style="height: 20rpx"></view>
<home-com-hong-meng></home-com-hong-meng>
</view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view> </view>
src/pageTabBar/Me/Me.vue
+67 -28
View File
@@ -91,6 +91,39 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
//background-color: rgba(255, 255, 255, 0.05);
}
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
overflow: hidden;
: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%);
}
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: 1px;
@include line-color();
}
}
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
@@ -154,39 +187,45 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <!-- <template v-slot:default>-->
<view class="default-view-slot" @click="defaultSearchChange"> <!-- <view class="default-view-slot" @click="defaultSearchChange">-->
<view class="default-view-slot-left"></view> <!-- <view class="default-view-slot-left"></view>-->
<view class="default-view-slot-right"> <!-- <view class="default-view-slot-right">-->
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill" <!-- <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"-->
src="https://hudie.xiao.band/search.png" webp/> <!-- src="https://hudie.xiao.band/search.png" webp/>-->
<view class="default-view-slot-right-text">搜索</view> <!-- <view class="default-view-slot-right-text">搜索</view>-->
</view> <!-- </view>-->
<view class="line-widht-number" style="width: 30rpx"></view> <!-- <view class="line-widht-number" style="width: 30rpx"></view>-->
</view> <!-- </view>-->
</template> <!-- </template>-->
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--> <!--分隔线,上面的是子组件-->
<view class="line-widht-number" style="height: 20rpx"></view> <view class="scrollTopHeigh"><!--预留的空间高度-->
</view> <view class="line-widht-number" style="height: 20rpx"></view>
<!-- 滚动区域开始--> </view>
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false" <!-- 滚动区域开始-->
class="scrollViewHeigh"> <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
<view class=""> class="scrollViewHeigh">
<me-com-user-info></me-com-user-info> <view class="">
<view class="line-widht-number" style="height: 10rpx"></view> <me-com-user-info></me-com-user-info>
<me-com-user-server></me-com-user-server> <view class="line-widht-number" style="height: 10rpx"></view>
<me-com-user-server></me-com-user-server>
</view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
</view> </view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
</view> </view>
</view> </view>
</wd-config-provider> </wd-config-provider>
</view> </view>
src/pages/index.vue
+18 -3
View File
@@ -159,8 +159,8 @@
内容 内容
<view class=""> <view class="">
<wd-button type="primary" icon="phone" :block="true" <wd-button type="primary" icon="phone" :block="true"
@click="buttonClick" custom-class="custom-shadow"> @click="小程序发起支付" custom-class="custom-shadow">
信息按钮 小程序发起支付
</wd-button> </wd-button>
</view> </view>
</scroll-view> </scroll-view>
@@ -177,12 +177,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ChildComScroll from "@/components/ChildComScroll.vue"; import ChildComScroll from "@/components/ChildComScroll.vue";
import type {GlobelsChildPropsType} from "@/types/通用类型"; import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
import {onTabItemTap} from "@dcloudio/uni-app"; import {onTabItemTap} from "@dcloudio/uni-app";
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore"; import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
import {useMessage, useToast} from "wot-design-uni"; import {useMessage, useToast} from "wot-design-uni";
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types"; import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
import {ref} from "vue"; import {ref} from "vue";
import {useRequest} from "@uni-helper/uni-use";
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用 defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
let toast = useToast("default-toast"); let toast = useToast("default-toast");
@@ -232,5 +233,19 @@
await wx.vibrateShort({type: "heavy"});//medium heavy light await wx.vibrateShort({type: "heavy"});//medium heavy light
console.log("============="); console.log("=============");
}); });
const 小程序发起支付 = async (): Promise<void> => {
try {
let data = await useRequest<ApiAxiosResponse<Array<string>, WechatMiniprogram.RequestPaymentOption>>(
"https://xiao.sixgou.com/demopay/jsapi/", {
method: "POST",
data: {self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,}
});
await wx.requestPayment({...data.data.value!.resData.dictData});
} catch (e) {
console.log(e, "❌❌❌❌❌❌❌❌❌❌捕获支付错误");
toast.error({msg: "支付取消", position: "middle"});
}
};
</script> </script>
src/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue
+1 -1
View File
@@ -730,7 +730,7 @@
async function 打开支付弹窗(): Promise<void> { async function 打开支付弹窗(): Promise<void> {
showRules.value = true; showRules.value = true;
await wx.vibrateShort({type: "medium"});//medium heavy light await wx.vibrateShort({type: "medium"}); //medium heavy light
} }
async function 关闭弹框(): Promise<void> { async function 关闭弹框(): Promise<void> {
src/subPackages/homeSubPages/商品详情页面/商品详情页面.vue
+54 -43
View File
@@ -92,37 +92,46 @@
} }
} }
.grit-content {
.scrollTopHeigh { height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
/*在滚动区域内的, 可以自定义的高度*/ display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box; box-sizing: border-box;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.scrollTopHeigh {
.scrollViewHeigh { /*在滚动区域内的, 可以自定义的高度*/
/*滚动页面区域范围*/ box-sizing: border-box;
box-sizing: border-box; height: $defaultTopHeight;
font-size: 1rem; background-color: rgba(255, 255, 255, 0.05);
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
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%);
}
} }
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
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%);
}
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
//@include line-color();
}
} }
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
//@include line-color();
}
} }
</style> </style>
<template> <template>
@@ -147,27 +156,29 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <!--分隔线,上面的是子组件-->
<!-- 滚动区域开始--> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false" <!-- 滚动区域开始-->
class="scrollViewHeigh"> <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<goods-com-swiper-images></goods-com-swiper-images> <goods-com-swiper-images></goods-com-swiper-images>
<goods-com-params></goods-com-params> <goods-com-params></goods-com-params>
<goods-com-share></goods-com-share> <goods-com-share></goods-com-share>
<view class="line-widht-number" style="height: 20rpx"></view> <view class="line-widht-number" style="height: 20rpx"></view>
<goods-com-service-params></goods-com-service-params> <goods-com-service-params></goods-com-service-params>
<goods-com-product_sales_specifications></goods-com-product_sales_specifications> <goods-com-product_sales_specifications></goods-com-product_sales_specifications>
<view class="line-widht-number" style="height: 10rpx"></view> <view class="line-widht-number" style="height: 10rpx"></view>
<goods-com-list-images></goods-com-list-images> <goods-com-list-images></goods-com-list-images>
</scroll-view> </scroll-view>
<!--滚动区域结束--> <!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--> <view class="scrollBottomHeigh"><!--底部预留区域-->
<goods-com-pay-card></goods-com-pay-card> <goods-com-pay-card></goods-com-pay-card>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
</wd-config-provider> </wd-config-provider>
src/subPackages/homeSubPages/商城页面目录/PageShangCheng.vue
+16 -15
View File
@@ -91,7 +91,7 @@
.grit-content { .grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight)); height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto; grid-auto-rows: auto 1fr auto;
@@ -329,21 +329,22 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <!-- <template v-slot:default>-->
<view class="default-view-slot" @click="defaultSearchChange"> <!-- <view class="default-view-slot" @click="defaultSearchChange">-->
<view class="default-view-slot-left"></view> <!-- <view class="default-view-slot-left"></view>-->
<view class="default-view-slot-right"> <!-- <view class="default-view-slot-right">-->
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill" <!-- <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"-->
src="https://hudie.xiao.band/search.png" webp/> <!-- src="https://hudie.xiao.band/search.png" webp/>-->
<view class="default-view-slot-right-text">搜索</view> <!-- <view class="default-view-slot-right-text">搜索</view>-->
</view> <!-- </view>-->
<view class="line-widht-number" style="width: 30rpx"></view> <!-- <view class="line-widht-number" style="width: 30rpx"></view>-->
</view> <!-- </view>-->
</template> <!-- </template>-->
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
src/subPackages/homeSubPages/物流追踪页面/物流追踪页面.vue
+496 -476
View File
File diff suppressed because it is too large Load Diff
src/subPackages/homeSubPages/用户积分页面/用户积分页面.vue
+1 -1
View File
@@ -91,7 +91,7 @@
.grit-content { .grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight)); height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto; grid-auto-rows: auto 1fr auto;
src/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面.vue
+25 -32
View File
@@ -3,21 +3,6 @@
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度 $defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
$xiaoBottomHeigh: 100rpx; // 滚动区域外,可以预留的高度 $xiaoBottomHeigh: 100rpx; // 滚动区域外,可以预留的高度
/* 浅色模式 */ /* 浅色模式 */
//@media (prefers-color-scheme: light) {
// .phone-screen {
// color: white;
// background: #181818;
// }
//}
//
///* 深色模式 */
//@media (prefers-color-scheme: dark) {
// .phone-screen {
// color: white;
// background: #1a1a1a;
// }
//}
@mixin line-color { @mixin line-color {
@keyframes gradientFlow { @keyframes gradientFlow {
@@ -115,6 +100,13 @@
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
}
.scrollViewHeigh { .scrollViewHeigh {
/*滚动页面区域范围*/ /*滚动页面区域范围*/
@@ -135,10 +127,8 @@
.scrollBottomHeigh { .scrollBottomHeigh {
box-sizing: border-box; box-sizing: border-box;
height: $xiaoBottomHeigh;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
//@include line-color();
} }
} }
</style> </style>
@@ -164,23 +154,26 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <!--分隔线,上面的是子组件-->
<!-- 滚动区域开始--> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false" <!-- 滚动区域开始-->
class="scrollViewHeigh"> <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
<!-- 页面地址为空时显示的组件--> class="scrollViewHeigh">
<address-com-empty v-if="xiaoMain.addressDataList.length===0"></address-com-empty> <!-- 页面地址为空时显示的组件-->
<address-com-list v-if="xiaoMain.addressDataList.length>0"></address-com-list> <address-com-empty v-if="xiaoMain.addressDataList.length===0"></address-com-empty>
<address-com-list v-if="xiaoMain.addressDataList.length>0"></address-com-list>
</scroll-view> </scroll-view>
<!--滚动区域结束--> <!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--> <view class="scrollBottomHeigh"><!--底部预留区域-->
<address-com-add-new-address <address-com-add-new-address
v-if="xiaoMain.addressDataList.length!==0"></address-com-add-new-address> v-if="xiaoMain.addressDataList.length!==0"></address-com-add-new-address>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
</wd-config-provider> </wd-config-provider>
</view> </view>
src/subPackages/homeSubPages/订单数据页面/订单数据页面.vue
+91 -79
View File
@@ -105,53 +105,62 @@
} }
} }
.grit-content {
.scrollTopHeigh { height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
/*在滚动区域内的, 可以自定义的高度*/ display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box; box-sizing: border-box;
height: $defaultTopHeight;
:deep(.custom-class-tabbar) { .scrollTopHeigh {
//box-shadow:inset 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%); /*在滚动区域内的, 可以自定义的高度*/
//box-shadow: inset 0 2px 1px -2px rgb(0 0 0 / 15%), box-sizing: border-box;
//inset 0 2px 2px 0 rgb(0 0 0 / 14%), height: $defaultTopHeight;
//inset 0 1px 5px 0 rgb(0 0 0 / 14%),
//inset 1px 1px 2px rgb(0 0 0 / 14%),
//inset -1px -1px 2px rgb(0 0 0 / 14%);
//box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
box-shadow: /* 上 - 向下凹 */
inset 0 3px 2px -2px rgba(0, 0, 0, 0.3), /* 上 */
inset 0 -3px 2px -2px rgba(0, 0, 0, 0.3), /* 下 */
inset 3px 0 2px -2px rgba(0, 0, 0, 0.3), /* 左 */
inset -3px 0 2px -2px rgba(0, 0, 0, 0.3); /* 右 */
// box-shadow: inset X Y blur spread color
}
}
:deep(.custom-class-tabbar) {
.scrollViewHeigh { //box-shadow:inset 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%);
/*滚动页面区域范围*/ //box-shadow: inset 0 2px 1px -2px rgb(0 0 0 / 15%),
box-sizing: border-box; //inset 0 2px 2px 0 rgb(0 0 0 / 14%),
font-size: 1rem; //inset 0 1px 5px 0 rgb(0 0 0 / 14%),
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh}); //inset 1px 1px 2px rgb(0 0 0 / 14%),
overflow: hidden; //inset -1px -1px 2px rgb(0 0 0 / 14%);
//box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
box-shadow: /* 上 - 向下凹 */
:deep() { inset 0 3px 2px -2px rgba(0, 0, 0, 0.3), /* 上 */
/*button按钮的 阴影样式可以直接使用*/ inset 0 -3px 2px -2px rgba(0, 0, 0, 0.3), /* 下 */
.custom-shadow { inset 3px 0 2px -2px rgba(0, 0, 0, 0.3), /* 左 */
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%); inset -3px 0 2px -2px rgba(0, 0, 0, 0.3); /* 右 */
// box-shadow: inset X Y blur spread color
} }
} }
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
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%);
}
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
} }
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
} }
</style> </style>
<template> <template>
@@ -176,49 +185,52 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--> <!--分隔线,上面的是子组件-->
<wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round" <view class="scrollTopHeigh"><!--预留的空间高度-->
:bordered="true" activeColor="#f0883a" @change="选中的标签事件"> <wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round"
<wd-tabbar-item title="待揽件" :value="待揽件数量"> :bordered="true" activeColor="#f0883a" @change="选中的标签事件">
<template #icon> <wd-tabbar-item title="待揽件" :value="待揽件数量">
<wd-icon classPrefix="xiaozizi" name="daiqueren" :size="22" <template #icon>
:color="tabbar===0?'#f0883a':''"/> <wd-icon classPrefix="xiaozizi" name="daiqueren" :size="22"
:color="tabbar===0?'#f0883a':''"/>
</template> </template>
</wd-tabbar-item> </wd-tabbar-item>
<wd-tabbar-item title="待收货" :value="待收货数量"> <wd-tabbar-item title="待收货" :value="待收货数量">
<template #icon> <template #icon>
<wd-icon classPrefix="xiaozizi" name="peisongzhong1" :size="22" <wd-icon classPrefix="xiaozizi" name="peisongzhong1" :size="22"
:color="tabbar===1?'#f0883a':''"/> :color="tabbar===1?'#f0883a':''"/>
</template> </template>
</wd-tabbar-item> </wd-tabbar-item>
<wd-tabbar-item title="待评价" :value="待评价数量"> <wd-tabbar-item title="待评价" :value="待评价数量">
<template #icon> <template #icon>
<wd-icon classPrefix="xiaozizi" name="daipingjia1" :size="22" <wd-icon classPrefix="xiaozizi" name="daipingjia1" :size="22"
:color="tabbar===2?'#f0883a':''"/> :color="tabbar===2?'#f0883a':''"/>
</template> </template>
</wd-tabbar-item> </wd-tabbar-item>
<wd-tabbar-item title="全部订单"> <wd-tabbar-item title="全部订单">
<template #icon> <template #icon>
<wd-icon classPrefix="wd-icon" name="app" :size="22" <wd-icon classPrefix="wd-icon" name="app" :size="22"
:color="tabbar===3?'#f0883a':''"/> :color="tabbar===3?'#f0883a':''"/>
</template> </template>
</wd-tabbar-item> </wd-tabbar-item>
</wd-tabbar> </wd-tabbar>
</view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="line-widht-number" style="height: 10rpx"></view>
<order-com-empty v-if="isEmpty===0"></order-com-empty>
<order-com-list-data v-model:modelValue="tabbar" v-if="isEmpty>0"
:order_list_data="order_list_data ?? []"></order-com-list-data>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="line-widht-number" style="height: 10rpx"></view>
<order-com-empty v-if="isEmpty===0"></order-com-empty>
<order-com-list-data v-model:modelValue="tabbar" v-if="isEmpty>0"
:order_list_data="order_list_data ?? []"></order-com-list-data>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view> </view>
</wd-config-provider> </wd-config-provider>
</view> </view>