style(Sku): fix header height when hide header image

src/sku/demo/data.ts

@@ -1,4 +1,5 @@
-export const skuData = {
+export function getSkuData(large_picture_preview = false) {
+  return {
     goods_id: '946755',
     quota: 15,
     quota_used: 0,
@@ -35,7 +36,7 @@ export const skuData = {
           ],
           k_s: 's1',
           count: 2,
-        large_picture_preview: true,
+          large_picture_preview,
         },
         {
           k: '尺寸',
@@ -200,6 +201,7 @@ export const skuData = {
       },
     ],
   };
+}
 
 export const initialSku = {
   s1: '30349',

src/sku/demo/index.vue

@@ -83,15 +83,15 @@
       <div class="sku-container">
         <van-sku
           v-model="showLargePicturePreview"
-          :sku="skuData.sku"
+          :sku="skuData2.sku"
-          :quota="skuData.quota"
+          :quota="skuData2.quota"
-          :goods="skuData.goods_info"
+          :goods="skuData2.goods_info"
-          :goods-id="skuData.goods_id"
+          :goods-id="skuData2.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
+          :hide-stock="skuData2.sku.hide_stock"
-          :properties="skuData.properties"
+          :properties="skuData2.properties"
-          :quota-used="skuData.quota_used"
+          :quota-used="skuData2.quota_used"
           :message-config="messageConfig"
-          :start-sale-num="skuData.start_sale_num"
+          :start-sale-num="skuData2.start_sale_num"
           :show-header-image="false"
           :custom-sku-validator="customSkuValidator"
           :close-on-click-overlay="closeOnClickOverlay"
@@ -175,7 +175,7 @@
 </template>
 
 <script>
-import { skuData, initialSku } from './data';
+import { initialSku, getSkuData } from './data';
 import { LIMIT_TYPE } from '../constants';
 
 export default {
@@ -203,7 +203,8 @@ export default {
   },
 
   data() {
-    this.skuData = skuData;
+    this.skuData = getSkuData();
+    this.skuData2 = getSkuData(true);
     this.initialSku = initialSku;
 
     return {

src/sku/index.less

@@ -53,6 +53,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
+      box-sizing: border-box;
       min-height: 96px;
       padding: @padding-sm 20px @padding-sm @padding-xs;
       overflow: hidden;
@@ -282,6 +283,7 @@
 
     &__content {
       overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
 
       &::-webkit-scrollbar {
         display: none;

src/sku/test/index.spec.js

@@ -1,6 +1,8 @@
 import { mount } from '../../../test';
 import Sku from '..';
-import { skuData, initialSku } from '../demo/data';
+import { getSkuData, initialSku } from '../demo/data';
+
+const skuData = getSkuData();
 
 test('resetSelectedSku method', () => {
   skuData.sku.messages = [];