add upload refresh

@@ -75,6 +75,11 @@ export default {
       Share.init();
     }
 
+    this.$yoho.setWebview({
+      bounces: false,
+      clearCacheWhenDestroy: false
+    });
+
     this.reportEnter();
   },
   methods: {

 <template>
   <div>
-    <Layout class="article">
+    <Layout ref="layout" class="article" @touchstart.native="onTouchStart($event)" @touchmove.native="onTouchMove($event)" @touchend.native="onTouchEnd($event)">
       <TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic">
         <template v-if="tabBlockSuctionTop" v-slot:suctionTop>
           <TopicTabBlock :active-type="activeTopicListType" @on-change-tab="onChangeTab"></TopicTabBlock>
         </template>
       </TopicHeader>
 
+      <div ref="pullEle" class="pull">{{this.text.startPull}}</div>
+
       <RecycleScrollReveal :size="5" :thumbs="thumbs" ref="scroll" @scroll="onScroll" :offset="800" :on-fetch="onFetch" :manual-init="true"
       @on-inited="onInited">
         <template v-slot:eternalTop>
@@ -66,7 +68,19 @@ export default {
       scrollTop: 0,
       activeTopicListType: 2,
       colWidthForTwo: 0,
-      scrolling: false
+      scrolling: false,
+      page: 1,
+      fetching: false,
+      startLength: 0,
+      pullLength: 0,
+      threshold: 50,
+      enable: false,
+      firstTouchStart: true,
+      text: {
+        startPull: '下拉刷新',
+        releasePull: '松开刷新',
+        refreshing: '刷新中'
+      }
     };
   },
   created() {
@@ -355,6 +369,61 @@ export default {
           }
         });
       }
+    },
+    onTouchStart(e) {
+      if (this.scrollTop !== 0) {
+        this.enable = false;
+        return;
+      }
+
+      this.enable = true;
+      this.startLength = e.touches[0].pageY;
+      this.$refs.scroll.$el.style.transition = 'transform 0s';
+      this.$refs.pullEle.innerText = this.text.startPull;
+    },
+    onTouchMove(e) {
+      if (!this.enable) {
+        return;
+      }
+
+      this.pullLength = e.touches[0].pageY - this.startLength;
+
+      if (this.pullLength) {
+        this.pullElement(this.pullLength);
+      }
+    },
+    onTouchEnd() {
+      if (!this.enable) {
+        return;
+      }
+
+      if (this.pullLength > this.threshold) {
+        this.$refs.pullEle.innerText = this.text.refreshing;
+        this.onPull();
+      }
+
+      this.$refs.scroll.$el.style.transition = 'transform 0.6s ease';
+      this.$refs.scroll.$el.style.transform = 'translate(0, 0px)';
+
+      this.pullLength = 0;
+      this.startLength = 0;
+      this.enable = false;
+    },
+    pullElement(length) {
+      if (length <= 0) {
+        return;
+      }
+
+      if (length < this.$refs.pullEle.offsetHeight) {
+        this.$refs.scroll.$el.style.transform = `translate(0, ${length}px)`;
+
+        if (length > this.threshold) {
+          this.$refs.pullEle.innerText = this.text.releasePull;
+        }
+      }
+    },
+    async onPull() {
+      this.init();
     }
   },
   components: {
@@ -383,6 +452,17 @@ export default {
   }
 }
 
+.pull {
+  position: absolute;
+  background-color: black;
+  color: white;
+  height: 120PX;
+  width: 100%;
+  font-size: 24px;
+  text-align: center;
+  line-height: 70PX;
+}
+
 .publish-btn {
   width: 260px;
   height: 80px;