[bugfix] PullRefresh head overflow (#436)

docs/demos/views/coupon.vue

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

packages/pull-refresh/index.vue

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

packages/vant-css/src/pull-refresh.css

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

test/unit/specs/coupon.spec.js

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

test/unit/specs/pull-refresh.spec.js

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