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/subPackages/homeSubPages/商品详情页面/商品详情页面.vue
+54 -43
View File
@@ -92,37 +92,46 @@
}
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
.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;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.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%);
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.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>
<template>
@@ -147,27 +156,29 @@
</template>
</ChildComScroll>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="grit-content">
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<goods-com-swiper-images></goods-com-swiper-images>
<goods-com-params></goods-com-params>
<goods-com-share></goods-com-share>
<view class="line-widht-number" style="height: 20rpx"></view>
<goods-com-service-params></goods-com-service-params>
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
<view class="line-widht-number" style="height: 10rpx"></view>
<goods-com-list-images></goods-com-list-images>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<goods-com-pay-card></goods-com-pay-card>
<goods-com-swiper-images></goods-com-swiper-images>
<goods-com-params></goods-com-params>
<goods-com-share></goods-com-share>
<view class="line-widht-number" style="height: 20rpx"></view>
<goods-com-service-params></goods-com-service-params>
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
<view class="line-widht-number" style="height: 10rpx"></view>
<goods-com-list-images></goods-com-list-images>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<goods-com-pay-card></goods-com-pay-card>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
</wd-config-provider>