blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* fix(CouponList): fix scroll issue

* perf: using vh instead of window height
This commit is contained in:
neverland 2021-09-15 15:15:29 +08:00 committed by GitHub
parent ba5a70d5bc
commit ac08bd9dab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/vant/src/coupon-list/CouponList.tsx
View File

@ -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

1
packages/vant/src/coupon-list/demo/index.vue
View File

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

5
packages/vant/src/coupon-list/index.less
View File

@ -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;
}

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

@ -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>