fix(CouponList): fix scroll issue (#9480)

* fix(CouponList): fix scroll issue

* perf: using vh instead of window height

packages/vant/src/coupon-list/CouponList.tsx

@@ -12,7 +12,6 @@ import {
 import { truthProp, createNamespace } from '../utils';
 
 // Composables
-import { useWindowSize } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 
 // Components
@@ -83,8 +82,6 @@ export default defineComponent({
       code: props.code,
     });
 
-    const { height: windowHeight } = useWindowSize();
-
     const buttonDisabled = computed(
       () =>
         !props.exchangeButtonLoading &&
@@ -93,10 +90,6 @@ export default defineComponent({
           state.code.length < props.exchangeMinLength)
     );
 
-    const listStyle = computed(() => ({
-      height: windowHeight.value - (props.showExchangeBar ? 140 : 94) + 'px',
-    }));
-
     const onExchange = () => {
       emit('exchange', state.code);
 
@@ -155,8 +148,10 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', { 'with-bottom': props.showCloseButton })}
-            style={listStyle.value}
+            class={bem('list', {
+              'with-bar': props.showExchangeBar,
+              'with-bottom': props.showCloseButton,
+            })}
           >
             {coupons.map((coupon, index) => (
               <Coupon
@@ -183,8 +178,10 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', { 'with-bottom': props.showCloseButton })}
-            style={listStyle.value}
+            class={bem('list', {
+              'with-bar': props.showExchangeBar,
+              'with-bottom': props.showCloseButton,
+            })}
           >
             {disabledCoupons.map((coupon) => (
               <Coupon

packages/vant/src/coupon-list/demo/index.vue

@@ -110,7 +110,6 @@ const onExchange = () => {
         :coupons="coupons"
         :chosen-coupon="chosenCoupon"
         :disabled-coupons="disabledCoupons"
-        :show-count="false"
         @change="onChange"
         @exchange="onExchange"
       />

packages/vant/src/coupon-list/index.less

@@ -56,10 +56,15 @@
 
   &__list {
     box-sizing: border-box;
+    height: calc(100vh - 108px);
     padding: var(--van-padding-md) 0 var(--van-padding-lg);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
+    &--with-bar {
+      height: calc(100vh - 152px);
+    }
+
     &--with-bottom {
       padding-bottom: 50px;
     }

packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap

@@ -56,9 +56,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
@@ -334,9 +332,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -349,9 +345,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -432,9 +426,7 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -448,9 +440,7 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -532,9 +522,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.com/xxx.png">
             <p>