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

[bugfix] PullRefresh head overflow (#436)

Browse Source
This commit is contained in:
neverland 2017-12-14 16:32:34 +08:00 committed by GitHub
parent a024399fbe
commit 03bb3cc6ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/demos/views/coupon.vue
View File

@ -57,6 +57,7 @@ export default {
coupon() { coupon() {
return { return {
id: 1,
available: 1, available: 1,
discount: 0, discount: 0,
denominations: 150, denominations: 150,
@ -72,6 +73,7 @@ export default {
discountCoupon() { discountCoupon() {
return { return {
...this.coupon, ...this.coupon,
id: 2,
discount: 88, discount: 88,
denominations: 0, denominations: 0,
origin_condition: 50, origin_condition: 50,
@ -82,6 +84,7 @@ export default {
disabledCoupon() { disabledCoupon() {
return { return {
...this.coupon, ...this.coupon,
id: 3,
avaliable: 0, avaliable: 0,
reason: this.$t('coupon.reason') reason: this.$t('coupon.reason')
} }
@ -90,6 +93,7 @@ export default {
disabledDiscountCoupon() { disabledDiscountCoupon() {
return { return {
...this.discountCoupon, ...this.discountCoupon,
id: 4,
avaliable: 0, avaliable: 0,
reason: this.$t('coupon.reason') reason: this.$t('coupon.reason')
} }

48
packages/pull-refresh/index.vue
View File

@ -1,28 +1,30 @@
<template> <template>
<div <div class="van-pull-refresh">
class="van-pull-refresh" <div
:style="style" class="van-pull-refresh__track"
@touchstart="onTouchStart" :style="style"
@touchmove="onTouchMove" @touchstart="onTouchStart"
@touchend="onTouchEnd" @touchmove="onTouchMove"
@touchcancel="onTouchEnd" @touchend="onTouchEnd"
> @touchcancel="onTouchEnd"
<div class="van-pull-refresh__head"> >
<slot name="normal" v-if="status === 'normal'"></slot> <div class="van-pull-refresh__head">
<slot name="pulling" v-if="status === 'pulling'"> <slot name="normal" v-if="status === 'normal'"></slot>
<span class="van-pull-refresh__text">{{ pullingText || $t('pullingText') }}</span> <slot name="pulling" v-if="status === 'pulling'">
</slot> <span class="van-pull-refresh__text">{{ pullingText || $t('pullingText') }}</span>
<slot name="loosing" v-if="status === 'loosing'"> </slot>
<span class="van-pull-refresh__text">{{ loosingText || $t('loosingText') }}</span> <slot name="loosing" v-if="status === 'loosing'">
</slot> <span class="van-pull-refresh__text">{{ loosingText || $t('loosingText') }}</span>
<slot name="loading" v-if="status === 'loading'"> </slot>
<div class="van-pull-refresh__loading"> <slot name="loading" v-if="status === 'loading'">
<loading /> <div class="van-pull-refresh__loading">
<span>{{ loadingText || $t('loadingText') }}</span> <loading />
</div> <span>{{ loadingText || $t('loadingText') }}</span>
</slot> </div>
</slot>
</div>
<slot></slot>
</div> </div>
<slot></slot>
</div> </div>
</template> </template>

6
packages/vant-css/src/pull-refresh.css
View File

@ -2,7 +2,11 @@
.van-pull-refresh { .van-pull-refresh {
user-select: none; user-select: none;
position: relative; overflow: hidden;
&__track {
position: relative;
}
&__head { &__head {
width: 100%; width: 100%;

16
test/unit/specs/coupon.spec.js
View File

@ -4,6 +4,7 @@ import { mount } from 'avoriaz';
import { DOMChecker } from '../utils'; import { DOMChecker } from '../utils';
const coupon = { const coupon = {
id: 1,
available: 1, available: 1,
discount: 0, discount: 0,
denominations: 150, denominations: 150,
@ -18,6 +19,7 @@ const coupon = {
const discountCoupon = { const discountCoupon = {
...coupon, ...coupon,
id: 2,
discount: 88, discount: 88,
denominations: 0, denominations: 0,
origin_condition: 50, origin_condition: 50,
@ -26,18 +28,21 @@ const discountCoupon = {
}; };
const emptyCoupon = { const emptyCoupon = {
id: 3,
denominations: 0, denominations: 0,
discount: 0 discount: 0
}; };
const disabledCoupon = { const disabledCoupon = {
...coupon, ...coupon,
id: 4,
avaliable: 0, avaliable: 0,
reason: '未满足使用门槛' reason: '未满足使用门槛'
}; };
const disabledDiscountCoupon = { const disabledDiscountCoupon = {
...discountCoupon, ...discountCoupon,
id: 5,
avaliable: 0, avaliable: 0,
reason: '未满足使用门槛' reason: '未满足使用门槛'
}; };
@ -204,15 +209,19 @@ describe('CouponList', () => {
propsData: { propsData: {
coupons: [coupon, { coupons: [coupon, {
...coupon, ...coupon,
id: 10,
denominations: 10 denominations: 10
}, { }, {
...coupon, ...coupon,
id: 11,
denominations: 100 denominations: 100
}, { }, {
...coupon, ...coupon,
id: 12,
denominations: 135 denominations: 135
}, { }, {
...coupon, ...coupon,
id: 13,
denominations: 0 denominations: 0
}] }]
} }
@ -231,9 +240,11 @@ describe('CouponList', () => {
propsData: { propsData: {
coupons: [discountCoupon, { coupons: [discountCoupon, {
...discountCoupon, ...discountCoupon,
id: 10,
discount: 10 discount: 10
}, { }, {
...discountCoupon, ...discountCoupon,
id: 11,
discount: 0 discount: 0
}] }]
} }
@ -258,7 +269,10 @@ describe('CouponList', () => {
wrapper.vm.$on('exchange', (code) => { wrapper.vm.$on('exchange', (code) => {
expect(code).to.equal(code); expect(code).to.equal(code);
wrapper.vm.coupons.push(coupon); wrapper.vm.coupons.push({
...coupon,
id: 15
});
}); });
setTimeout(() => { setTimeout(() => {

50
test/unit/specs/pull-refresh.spec.js
View File

@ -25,20 +25,21 @@ describe('PullRefresh', () => {
} }
}); });
triggerTouch(wrapper, 'touchstart', 0, 0); const track = wrapper.find('.van-pull-refresh__track')[0];
triggerTouch(wrapper, 'touchmove', 0, 10); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(track, 'touchmove', 0, 10);
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('下拉即可刷新...'); expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('下拉即可刷新...');
triggerTouch(wrapper, 'touchmove', 0, 30); triggerTouch(track, 'touchmove', 0, 30);
triggerTouch(wrapper, 'touchmove', 0, 60); triggerTouch(track, 'touchmove', 0, 60);
triggerTouch(wrapper, 'touchmove', 0, 100); triggerTouch(track, 'touchmove', 0, 100);
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('释放即可刷新...'); expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('释放即可刷新...');
triggerTouch(wrapper, 'touchend', 0, 100); triggerTouch(track, 'touchend', 0, 100);
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-pull-refresh__loading span')[1].text()).to.equal('加载中...'); expect(wrapper.find('.van-pull-refresh__loading span')[1].text()).to.equal('加载中...');
@ -67,17 +68,18 @@ describe('PullRefresh', () => {
}, 30); }, 30);
}); });
triggerTouch(wrapper, 'touchstart', 0, 0); const track = wrapper.find('.van-pull-refresh__track')[0];
triggerTouch(wrapper, 'touchmove', 0, 100); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(wrapper, 'touchend', 0, 100); triggerTouch(track, 'touchmove', 0, 100);
triggerTouch(track, 'touchend', 0, 100);
expect(wrapper.vm.value).to.be.true; expect(wrapper.vm.value).to.be.true;
expect(wrapper.vm.status).to.equal('loading'); expect(wrapper.vm.status).to.equal('loading');
// ignore touch event when loading // ignore touch event when loading
triggerTouch(wrapper, 'touchstart', 0, 0); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(wrapper, 'touchmove', 0, 100); triggerTouch(track, 'touchmove', 0, 100);
triggerTouch(wrapper, 'touchend', 0, 100); triggerTouch(track, 'touchend', 0, 100);
}); });
it('pull a short distance', () => { it('pull a short distance', () => {
@ -87,9 +89,10 @@ describe('PullRefresh', () => {
} }
}); });
triggerTouch(wrapper, 'touchstart', 0, 0); const track = wrapper.find('.van-pull-refresh__track')[0];
triggerTouch(wrapper, 'touchmove', 0, 10); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(wrapper, 'touchend', 0, 10); triggerTouch(track, 'touchmove', 0, 10);
triggerTouch(track, 'touchend', 0, 10);
expect(wrapper.vm.value).to.be.false; expect(wrapper.vm.value).to.be.false;
expect(wrapper.vm.status).to.equal('normal'); expect(wrapper.vm.status).to.equal('normal');
@ -104,14 +107,15 @@ describe('PullRefresh', () => {
window.scrollTop = 100; window.scrollTop = 100;
const track = wrapper.find('.van-pull-refresh__track')[0];
// ignore touch event when not at page top // ignore touch event when not at page top
triggerTouch(wrapper, 'touchstart', 0, 0); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(wrapper, 'touchmove', 0, 100); triggerTouch(track, 'touchmove', 0, 100);
triggerTouch(wrapper, 'touchend', 0, 100); triggerTouch(track, 'touchend', 0, 100);
expect(wrapper.vm.ceiling).to.be.false; expect(wrapper.vm.ceiling).to.be.false;
window.scrollTop = 0; window.scrollTop = 0;
triggerTouch(wrapper, 'touchmove', 0, 100); triggerTouch(track, 'touchmove', 0, 100);
expect(wrapper.vm.ceiling).to.be.true; expect(wrapper.vm.ceiling).to.be.true;
}); });
@ -121,9 +125,11 @@ describe('PullRefresh', () => {
value: false value: false
} }
}); });
triggerTouch(wrapper, 'touchstart', 0, 0);
triggerTouch(wrapper, 'touchmove', 10, 0); const track = wrapper.find('.van-pull-refresh__track')[0];
triggerTouch(wrapper, 'touchend', 10, 0); triggerTouch(track, 'touchstart', 0, 0);
triggerTouch(track, 'touchmove', 10, 0);
triggerTouch(track, 'touchend', 10, 0);
expect(wrapper.vm.direction).to.equal('horizontal'); expect(wrapper.vm.direction).to.equal('horizontal');
}); });
}); });