fix js

 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%; background-color: #f0f0f0;">
       <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>
@@ -31,6 +31,7 @@ export default {
     return {
       scrollOptions: {
         directionLockThreshold: 0,
+        bounce: true
       }
     };
   },

@@ -13,7 +13,7 @@
         @scroll="scroll"
         @change="changePage"
       >
-        <SlideItem>
+        <SlideItem style="background-color: #f0f0f0;">
           <div class="filter-wrapper" v-if="showFilter">
             <div class="filter-mask" @click="onMaskClick"></div>
             <FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
@@ -27,14 +27,14 @@
           <Empty v-else></Empty>
         </SlideItem>
 
-        <SlideItem>
+        <SlideItem style="background-color: #f0f0f0;">
           <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>
+        <SlideItem  style="background-color: #f0f0f0;">
           <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>
@@ -185,7 +185,7 @@ export default {
   watch: {
     selectFilterId(val) {
       this.tabLabels[0].selectFilterId = val;
-      this.$refs.notuse.scrollTo(0, 0);
+      this.$refs.notuse && this.$refs.notuse.scrollTo(0, 0);
       this.onMaskClick();
       this.reachBottom(true);
     }