commit

 <template>
   <div v-transfer-dom :data-transfer="transfer">
-    <transition name="action-sheet-fade">
+    <transition name="action-sheet-move">
       <div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">
         <div class="yoho-popup-mask" @click="maskClick" v-if="mask"></div>
         <div class="yoho-popup-container">
           <div class="yoho-popup-content">
-            <transition name="action-sheet-move">
-              <div class="detail" v-show="isVisible">
-                <slot></slot>
-              </div>
-            </transition>
+            <div class="detail">
+              <slot></slot>
+            </div>
           </div>
         </div>
       </div>
@@ -87,23 +85,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .action-sheet-fade-enter,
-  .action-sheet-fade-leave-active {
-  }
-
-  .action-sheet-fade-enter-active,
-  .action-sheet-fade-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
   .action-sheet-move-enter,
   .action-sheet-move-leave-active {
     transform: translate3d(0, 100%, 0);
   }
 
-  .action-sheet-move-enter-active,
+  .action-sheet-move-enter-active {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
   .action-sheet-move-leave-active {
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease;
   }
 
   .yoho-popup {

@@ -66,9 +66,7 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
-      this.fetchComments();
-    }, 200);
+    this.init();
   },
   methods: {
     ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
@@ -84,7 +82,9 @@ export default {
         const comments = get(result, 'data.commentInfos', []);
 
         if (refresh) {
-          this.commentList = comments;
+          setTimeout(() => {
+            this.commentList = comments;
+          }, 200);
         } else {
           this.commentList = this.commentList.concat(comments);
         }
@@ -116,8 +116,9 @@ export default {
     },
     async init() {
       this.page = 1;
-      await this.fetchComments(true);
+      this.commentList = [];
       this.$refs.scroll.forceUpdate(true);
+      await this.fetchComments(true);
     },
     async onReply({commentId}) {
       const result = await this.fetchReplayList({

 <template>
-  <Article ref="article" :on-fetch="onFetch" @on-follow="onFollow"></Article>
+  <Article ref="article" :on-fetch="onFetch" @on-follow="onFollow" @on-slide="onSlide" @on-scroll-change="onScrollChange"></Article>
 </template>
 
 <script>
@@ -44,7 +44,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['CHANGE_AUTHOR_TOPIC_FOLLOW']),
+    ...mapMutations(['CHANGE_AUTHOR_TOPIC_FOLLOW', 'CHANGE_ARTICLE_TOPIC_SLIDE', 'CHANGE_ARTICLE_TOPIC_SCROLL']),
     ...mapActions(['fetchArticleListByTopic']),
     init() {
       this.page = 1;
@@ -85,6 +85,12 @@ export default {
     },
     onFollow({authorUid, follow}) {
       this.CHANGE_AUTHOR_TOPIC_FOLLOW({authorUid: authorUid, follow});
+    },
+    onSlide({articleId, index}) {
+      this.CHANGE_ARTICLE_TOPIC_SLIDE({articleId, index});
+    },
+    onScrollChange({articleId}) {
+      this.CHANGE_ARTICLE_TOPIC_SCROLL({articleId});
     }
   },
   components: {

@@ -12,7 +12,6 @@ export function createRouter() {
     return route;
   });
 
-  console.log(routes)
   const route = new Router({
     mode: 'history',
     routes,

@@ -75,7 +75,6 @@ export default {
         inx = index;
         article.lazy = false;
       } else if (inx && index - inx < 3) {
-        console.log(index, inx)
         article.lazy = false;
       }
     });
@@ -87,6 +86,26 @@ export default {
       }
     });
   },
+  [Types.CHANGE_ARTICLE_TOPIC_SLIDE](state, {articleId, index}) {
+    state.articleListByTopic.forEach(article => {
+      if (article.articleId === articleId) {
+        article.blockIndex = index;
+        return;
+      }
+    });
+  },
+  [Types.CHANGE_ARTICLE_TOPIC_SCROLL](state, {articleId}) {
+    let inx;
+
+    state.articleListByTopic.forEach((article, index) => {
+      if (article.articleId === articleId) {
+        inx = index;
+        article.lazy = false;
+      } else if (inx && index - inx < 3) {
+        article.lazy = false;
+      }
+    });
+  },
   [Types.FETCH_ARTICLE_TOPIC_REQUEST](state, {page}) {
     state.fetchArticleListByTopic = true;
     if (page === 1) {
@@ -96,10 +115,26 @@ export default {
   },
   [Types.FETCH_ARTICLE_TOPIC_SUCCESS](state, {data}) {
     state.fetchArticleListByTopic = false;
-    state.articleListByTopic = state.articleListByTopic.concat(data.detailList);
     state.articleLastedTimeByTopic = data.lastedTime;
+    data.detailList.forEach(item => {
+      get(item, 'productList', []).forEach(product => {
+        product.favorite = false;
+      });
+      item.blockIndex = 1;
+      item.lazy = true;
+    });
+    state.articleListByTopic = state.articleListByTopic.concat(data.detailList);
 
     state.articleListByTopic.forEach((item, index) => {
+      const imageBlocks = get(item, 'blockList', []).filter(block => block.templateKey === 'image');
+      const firstImage = first(imageBlocks);
+
+      if (firstImage) {
+        let {width, height} = getArticleImageSize(firstImage);
+
+        firstImage.width = width;
+        firstImage.height = height;
+      }
       item.index = index;
     });
   },

@@ -15,6 +15,8 @@ export const CHANGE_AUTHOR_FOLLOW = 'CHANGE_AUTHOR_FOLLOW';
 export const CHANGE_AUTHOR_TOPIC_FOLLOW = 'CHANGE_AUTHOR_TOPIC_FOLLOW';
 export const CHANGE_ARTICLE_LIST_SLIDE = 'CHANGE_ARTICLE_LIST_SLIDE';
 export const CHANGE_ARTICLE_LIST_SCROLL = 'CHANGE_ARTICLE_LIST_SCROLL';
+export const CHANGE_ARTICLE_TOPIC_SLIDE = 'CHANGE_ARTICLE_TOPIC_SLIDE';
+export const CHANGE_ARTICLE_TOPIC_SCROLL = 'CHANGE_ARTICLE_TOPIC_SCROLL';
 
 export const FETCH_ARTICLE_TOPIC_REQUEST = 'FETCH_ARTICLE_TOPIC_REQUEST';
 export const FETCH_ARTICLE_TOPIC_FAILD = 'FETCH_ARTICLE_TOPIC_FAILD';