【优化】优化模板库内点餐模块样式效果。

CoreCms.Net.Uni-App/CoreShop/pages/template/diancan/list/list.scss

@@ -73,7 +73,7 @@
     }
 
 
-.cart-box { position: absolute; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
+.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
     .cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
     .pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
     .mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;

CoreCms.Net.Uni-App/CoreShop/pages/template/diancan/list/list.vue

@@ -41,7 +41,7 @@
                 </view>
             </view>
             <view class="content">
-                <scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
+                <scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
                     <view class="wrapper">
                         <view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus"
                               :key="index" @tap="handleMenuTap(item.id)">
@@ -50,14 +50,11 @@
                         </view>
                     </view>
                 </scroll-view>
-                <!-- goods list begin -->
+                <scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
-                <scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll">
                     <view class="wrapper">
                         <view class="list">
-                            <!-- category begin -->
                             <view class="category" v-for="(good, key) in goodsList" :key="key" :id="`cate-${item.id}`">
                                 <view class="items">
-                                    <!-- 商品 begin -->
                                     <view class="good">
                                         <image :src="good.images" class="image" @tap="goGoodsDetail(item.id)"></image>
                                         <view class="right">
@@ -74,10 +71,8 @@
                                             </view>
                                         </view>
                                     </view>
-                                    <!-- 商品 end -->
                                 </view>
                             </view>
-                            <!-- category end -->
                             <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
                         </view>
                     </view>
@@ -85,16 +80,7 @@
                 </scroll-view>
                 <!-- goods list end -->
             </view>
-            <!-- 购物车栏 begin -->
+
-            <view class="cart-box">
-                <view class="mark">
-                    <image src="https://files.cdn.coreshop.cn/static/template/diancan/images/cart.png" class="cart-img"></image>
-                    <view class="tag">{{cartNums}}</view>
-                </view>
-                <view class="price">￥{{cartMoney}}</view>
-                <button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
-            </view>
-            <!-- 购物车栏 end -->
         </view>
 
         <vk-data-goods-sku-popup ref="skuPopup"
@@ -107,6 +93,17 @@
                                  @close="onCloseSkuPopup"
                                  @add-cart="addCart"
                                  @buy-now="buyNow"></vk-data-goods-sku-popup>
+
+        <!-- 购物车栏 begin -->
+        <view class="cart-box">
+            <view class="mark">
+                <image src="https://files.cdn.coreshop.cn/static/template/diancan/images/cart.png" class="cart-img"></image>
+                <view class="tag">{{cartNums}}</view>
+            </view>
+            <view class="price">￥{{cartMoney}}</view>
+            <button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
+        </view>
+        <!-- 购物车栏 end -->
         <!-- 登录提示 -->
         <coreshop-login-modal></coreshop-login-modal>
     </view>
@@ -123,7 +120,6 @@
                 menuScrollIntoView: '',
                 good: {},
                 currentCateId: 0,//默认分类
-                scrollTop: 0,
                 loadStatus: 'loadmore',
                 loadIconType: 'flower',
                 loadText: {
@@ -141,6 +137,9 @@
                 skuMode: 1,
                 // 后端返回的商品信息
                 goodsSkuInfo: {},
+
+                headerH: 0,
+                scorllH: 0, //滚动区域全屏
             }
         },
         computed: {
@@ -166,6 +165,20 @@
             },
         },
         onShow() {
+            uni.getSystemInfo({
+                success: (e) => {
+                    // #ifndef MP
+                    this.StatusBar = e.statusBarHeight;
+                    if (e.platform == 'android') {
+                        this.headerH = e.statusBarHeight + 50;
+                    } else {
+                        this.headerH = e.statusBarHeight + 45;
+                    };
+                    // #endif
+                    this.scorllH = e.windowHeight - e.statusBarHeight - 180;
+                }
+            })
+
             this.categories();
             // 获取购物车数量
             this.getCartNums();
@@ -315,7 +328,6 @@
                 this.page = 1;
                 this.goodsList = [];
                 this.getGoods();
-                //this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
             },
             categories() {
                 this.$u.api.categories().then(res => {