fix scroll view

@@ -113,6 +113,7 @@ export default {
 
 <style lang="scss" scoped>
   .coupon-section {
+    margin-top: 20px;
     margin-bottom: 20px;
   }
 

@@ -43,7 +43,6 @@ export default {
   height: 90px;
   padding: 16px 20px;
   background-color: #fff;
-  position: fixed;
   top: 0;
   left: 0;
   z-index: 2;

@@ -132,7 +132,6 @@ export default {
     background: #3a3a3a;
     justify-content: center;
     align-items: center;
-    position: fixed;
     z-index: 4;
   }
 

 <template>
-    <Scroll ref="scroll" :options="options" @pulling-up="reachBottom" :data="data">
+  <div class="list-wrapper">
+    <Scroll ref="scroll" :options="options" @pulling-up="reachBottom" @pulling-down="pullRefresh" :data="data">
       <slot></slot>
     </Scroll>
+  </div>
 </template>
 
 <script>
@@ -17,6 +19,12 @@ export default {
         return {};
       }
     },
+    pullRefresh: {
+      type: Function,
+      default() {
+        return {};
+      }
+    },
     reachBottom: {
       type: Function,
       default() {
@@ -33,6 +41,9 @@ export default {
   methods: {
     forceUpdate() {
       this.$refs.scroll.forceUpdate();
+    },
+    scrollTo(x, y) {
+      this.$refs.scroll.scrollTo(x, y, 1000);
     }
   },
   components: {
@@ -43,4 +54,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.list-wrapper {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background-color: #f0f0f0;
+}
 </style>

 <template>
   <div style="height: 100%;">
-    <div style="background-color: #f0f0f0;height: 100%;">
-      <div class="head"></div>
-      <ScrollView :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
+      <ScrollView class="scroll-view" :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
         <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
       </ScrollView>
       <Empty v-else></Empty>
-    </div>
   </div>
 </template>
 
@@ -33,7 +30,7 @@ export default {
   data() {
     return {
       scrollOptions: {
-        directionLockThreshold: 0
+        directionLockThreshold: 0,
       }
     };
   },
@@ -52,7 +49,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .head {
-    height: 90px;
+  .scroll-view {
+    height: calc(100% - 90px);
   }
 </style>

 <template>
   <div style="height: 100%;">
-    <div class="head"></div>
     <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
 
     <div class="tab-slide-container">
@@ -14,31 +13,29 @@
         @scroll="scroll"
         @change="changePage"
       >
-        <SlideItem style="background-color: #f0f0f0;">
-          <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
-
+        <SlideItem>
           <div class="filter-wrapper" v-if="showFilter">
             <div class="filter-mask" @click="onMaskClick"></div>
             <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
           </div>
 
-          <div class="head"></div>
+          <ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
 
-          <ScrollView ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
+          <ScrollView class="scroll-view1" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
             <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index"></CouponItem>
           </ScrollView>
           <Empty v-else></Empty>
         </SlideItem>
 
-        <SlideItem style="background-color: #f0f0f0;">
-          <ScrollView ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
+        <SlideItem>
+          <ScrollView class="scroll-view2" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
             <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index"></CouponItem>
           </ScrollView>
           <Empty v-else></Empty>
         </SlideItem>
 
-        <SlideItem style="background-color: #f0f0f0;">
-          <ScrollView ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
+        <SlideItem>
+          <ScrollView class="scroll-view2" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
             <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index"></CouponItem>
           </ScrollView>
           <Empty v-else></Empty>
@@ -116,7 +113,8 @@ export default {
             more: '加载更多',
             noMore: '以上是最新的内容'
           }
-        }
+        },
+        bounce: true
       },
       slideOptions: {
         listenScroll: true,
@@ -179,12 +177,15 @@ export default {
         type: this.selectType,
         filter: this.tabLabels[this.selectIndex].selectFilterId,
         refresh
+      }).then(() => {
+        this.$refs[this.selectType].forceUpdate();
       });
     }
   },
   watch: {
     selectFilterId(val) {
       this.tabLabels[0].selectFilterId = val;
+      this.$refs.notuse.scrollTo(0, 0);
       this.onMaskClick();
       this.reachBottom(true);
     }
@@ -203,8 +204,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .head {
-    height: 90px;
+
+  .page-wrapper {
+    height: calc(100% - 90px);
   }
 
   .tab-slide-container {
@@ -214,7 +216,8 @@ export default {
   .filter-wrapper {
     width: calc(100% / 3);
     height: 100%;
-    position: fixed;
+    position: absolute;
+    top: 0;
     z-index: 4;
   }
 
@@ -227,4 +230,12 @@ export default {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
   }
+
+  .scroll-view1 {
+    height: calc(100% - 270px);
+  }
+
+  .scroll-view2 {
+    height: calc(100% - 180px);
+  }
 </style>

@@ -34,7 +34,7 @@ export default {
 
     if (!refresh) {
       if (state.yohoList[type].page > state.yohoList[type].pageNum) {
-        return;
+        return false;
       }
     }