commit

 <template>
   <div class="comment-list">
     <div class="comment-content">
-      <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">
-        <CommentItem
-          v-for="(comment, index) in commentList"
-          :key="index"
-          :parent-comment="comment.parentComment"
-          :children-comments="comment.childrenComments"
-          :column-type="columnType"
-          @on-reply="onReply">
-        </CommentItem>
-      </Scroll>
+      <LayoutRecycleList v-if="show" ref="comment" :offset="500" :on-fetch="onFetch">
+        <template class="article-item" v-slot:item="{ data }">
+          <CommentItem
+            :parent-comment="data.parentComment"
+            :children-comments="data.childrenComments"
+            :column-type="columnType"
+            @on-reply="onReply">
+          </CommentItem>
+        </template>
+      </LayoutRecycleList>
     </div>
     <div class="comment-footer">
       <div class="comment-input" @click="onComment">参与评论</div>
@@ -37,49 +37,36 @@ export default {
   data() {
     return {
       page: 1,
-      commentList: [],
-      scrollOption: {
-        pullUpLoad: {
-          threshold: 200,
-          txt: {
-            more: '上拉加载',
-            noMore: '- 已经到底了 -'
-          }
-        }
-      }
+      show: false
     };
   },
   mounted() {
-    this.fetchComments();
+    setTimeout(() => {
+      this.show = true;
+    }, 200);
   },
   methods: {
     ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
-    async fetchComments(refresh) {
+    async onFetch() {
       const result = await this.fetchCommentList({
         destId: this.destId,
         columnType: this.columnType,
         page: this.page,
       });
-      let dirty = true;
 
       if (result.code === 200) {
-        const appendComments = get(result, 'data.commentInfos', []);
+        const comments = get(result, 'data.commentInfos', []);
 
-        if (refresh) {
-          this.commentList = appendComments;
-        } else {
-          this.commentList = this.commentList.concat(appendComments);
-        }
-
-        if (appendComments.length) {
+        if (comments.length) {
           this.page++;
+          this.$emit('on-page-change', {
+            page: this.page,
+            size: result.data.total
+          });
+          return Promise.resolve(comments);
         } else {
-          dirty = false;
+          return Promise.resolve(false);
         }
-        this.$emit('on-page-change', {
-          page: this.page,
-          size: result.data.total
-        });
       } else {
         this.$createToast && this.$createToast({
           txt: result.message || '服务器开小差了',
@@ -87,12 +74,6 @@ export default {
           time: 1000
         }).show();
       }
-
-      this.$refs.scroll.forceUpdate(dirty);
-      return result;
-    },
-    onPullingUp() {
-      this.fetchComments();
     },
     async onComment() {
       const result = await this.postComment({
@@ -103,7 +84,7 @@ export default {
       });
 
       if (result.code === 200) {
-        this.onRefresh();
+        this.init();
       } else {
         this.$createToast({
           txt: result.message || '服务器开小差了',
@@ -112,10 +93,9 @@ export default {
         }).show();
       }
     },
-    async onRefresh() {
+    init() {
       this.page = 1;
-      await this.fetchComments(true);
-      this.$refs.scroll.forceUpdate(true);
+      this.$refs.comment.init();
     },
     async onReply({commentId}) {
       const result = await this.fetchReplayList({

+<template>
+  <Layout class="article">
+    <LayoutHeader theme="white" slot='header'>
+      {{headerText}}
+    </LayoutHeader>
+    <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>
+  </Layout>
+</template>
+
+<script>
+import CommentList from './comment-list';
+
+export default {
+  name: 'ArticleCommentComponent',
+  props: {
+    destId: Number
+  },
+  data() {
+    return {
+      size: 0
+    };
+  },
+  computed: {
+    headerText() {
+      return this.size ? `${this.size}条评论` : '';
+    }
+  },
+  methods: {
+    onPageChange({size}) {
+      this.size = size;
+    }
+  },
+  components: {CommentList}
+};
+</script>

-import CommentList from './comment-list';
+import Comment from './comment';
 
 export default [
-  CommentList,
+  Comment,
 ];

@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     onBack() {
-      if (this.yoho.ssrLoad) {
+      if (this.yoho.homePage) {
         this.$yoho.finishPage({});
       } else {
         this.$router.go(-1);

@@ -3,6 +3,7 @@ import createReport from 'report-error';
 
 import {
   SET_ENV,
+  ROUTE_CHANGE
 } from 'store/yoho/types';
 
 
@@ -18,6 +19,9 @@ export default context => {
     router.onReady(() => {
       const matched = router.getMatchedComponents();
 
+
+      store.commit(ROUTE_CHANGE, {to: router.currentRoute});
+
       if (matched.some(m => !m)) {
         reportError(new Error('导航组件为空'));
         router.push({name: 'error.500'});

 <template>
-  <Layout class="article">
-    <LayoutHeader theme="white" slot='header'>
-      {{headerText}}
-    </LayoutHeader>
-    <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>
-  </Layout>
+  <Comment :dest-id="destId"></Comment>
 </template>
 
 <script>
+import Comment from 'components/comments/comment';
+
 export default {
   name: 'ArticleComment',
   data() {
@@ -18,19 +15,8 @@ export default {
   computed: {
     destId() {
       return parseInt(this.$route.params.articleId, 10);
-    },
-    headerText() {
-      return this.size ? `${this.size}条评论` : '';
     }
   },
-  methods: {
-    onPageChange({size}) {
-      this.size = size;
-    }
-  }
+  components: {Comment}
 };
 </script>
-
-<style>
-
-</style>

@@ -31,12 +31,7 @@ export default {
   methods: {
     ...mapActions(['postComment']),
     onGoComment() {
-      this.$router.push({
-        name: 'article.comment',
-        params: {
-          articleId: this.data.articleId
-        }
-      });
+      this.$emit('on-comment');
     },
     onComment() {
       this.postComment({

@@ -20,7 +20,7 @@
       <div class="opts">
         <WidgetFav :num="data.favoriteCount" :article-id="data.articleId" :option="favoriteOption"></WidgetFav>
         <WidgetLike :num="data.praiseCount" :article-id="data.articleId" :option="praiseOption"></WidgetLike>
-        <WidgetComment :num="data.commentCount"></WidgetComment>
+        <WidgetComment :num="data.commentCount" @click.native="onComment"></WidgetComment>
       </div>
     </div>
   </div>
@@ -117,6 +117,9 @@ export default {
     },
     resizeScroll() {
       this.$emit('on-resize');
+    },
+    onComment() {
+      this.$emit('on-comment');
     }
   }
 };

@@ -3,8 +3,8 @@
     <ArticleItemHeader :data="headerData" :lazy="lazy" @on-follow="onFollow"></ArticleItemHeader>
     <ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide>
     <ProductGroup v-if="productListData.length" :data="productListData" :lazy="lazy"></ProductGroup>
-    <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand"></ArticleItemIntro>
-    <ArticleItemComment :data="commentData"></ArticleItemComment>
+    <ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing" @on-expand="onExpand" @on-comment="onComment"></ArticleItemIntro>
+    <ArticleItemComment :data="commentData" @on-comment="onComment"></ArticleItemComment>
     <div class="line"></div>
   </div>
 </template>
@@ -83,6 +83,9 @@ export default {
     },
     onExpand() {
       this.$emit('on-expand', {articleId: this.data.relateId, grassId: this.data.articleId});
+    },
+    onComment() {
+      this.$emit('on-comment', this.data);
     }
   },
   components: {ArticleItemHeader, ArticleItemSlide, ArticleItemIntro, ArticleItemComment}

@@ -18,13 +18,17 @@
           @on-resize="onResize(data)"
           @on-resizeing="onResizeing(data)"
           @on-follow="follow => onFollow(data, follow)"
-          @on-expand="onExpand"></ArticleItem>
+          @on-expand="onExpand"
+          @on-comment="onComment"></ArticleItem>
         <div :id="`ph${data.index}`"></div>
       </template>
     </LayoutRecycleList>
     <slot name="thumb" v-else></slot>
 
     <ArticleActionSheet ref="actionSheet"></ArticleActionSheet>
+    <YohoActionSheet v-if="showCommentAction" ref="commentAction" :full="true">
+      <Comment :destId="currentArticle.articleId"></Comment>
+    </YohoActionSheet>
   </Layout>
 </template>
 
@@ -46,6 +50,8 @@ export default {
   },
   data() {
     return {
+      articleId: 0,
+      showCommentAction: false,
       shareData: {},
       inx: 0,
       scrollTop: 0,
@@ -67,6 +73,12 @@ export default {
     }
   },
   methods: {
+    onComment({articleId}) {
+      console.log(articleId)
+      this.articleId = articleId;
+      this.showCommentAction = true;
+      this.$refs.commentAction.show();
+    },
     onScroll({item, scrollTop}) {
       this.scrollTop = scrollTop;
       if (scrollTop === 0) {

@@ -10,8 +10,6 @@
        @on-comment-click="onCommentClick"
        @on-close="onClose">
     </ArticleFooter>
-
-    <CommentActionSheet ref="actionSheet"></CommentActionSheet>
   </div>
 </template>
 
@@ -20,7 +18,6 @@
 import ArticleBar from './article-bar';
 import ArticleFooter from './article-footer';
 import ArticleBody from './article-body';
-import CommentActionSheet from './comment-action-sheet';
 import { createNamespacedHelpers } from 'vuex';
 
 const { mapActions, mapState } = createNamespacedHelpers('article');
@@ -31,7 +28,6 @@ export default {
     ArticleBar,
     ArticleBody,
     ArticleFooter,
-    CommentActionSheet
   },
   data() {
     return {
@@ -43,8 +39,12 @@ export default {
   },
   methods: {
     onCommentClick() {
-      this.$refs.actionSheet.destId = this.grassId;
-      this.$refs.actionSheet.click();
+      this.$router.push({
+        name: 'article.comment',
+        params: {
+          articleId: this.grassId
+        }
+      });
     },
     ...mapActions(['getDetail']),
     fetch(params) {

@@ -9,9 +9,6 @@ export default [{
   path: '/topic/:labelId',
   name: 'topic',
   component: () => import(/* webpackChunkName: "article" */ './topic'),
-  meta: {
-    keepAlive: true
-  }
 }, {
   path: '/article/:articleId/comment',
   name: 'article.comment',

@@ -26,7 +26,7 @@ export default function() {
       },
       historys: [],
       direction: 'forword',
-      ssrLoad: true, // 是否是ssr直出的页面
+      homePage: true
     },
     mutations: {
       [Types.SET_ENV](state, {context}) {
@@ -39,14 +39,7 @@ export default function() {
       [Types.SET_TITLE](state, {title}) {
         state.context.title = title;
       },
-      [Types.ROUTE_CHANGE](state, {to, from}) {
-        state.ssrLoad = false;
-        if (!state.historys.length) {
-          state.historys.push({
-            name: from.name,
-            path: from.fullPath
-          });
-        }
+      [Types.ROUTE_CHANGE](state, {to}) {
         const routeIndex = state.historys.findIndex(route => route.path === to.fullPath);
 
         if (routeIndex >= 0) {
@@ -59,6 +52,7 @@ export default function() {
           });
           state.direction = 'forword';
         }
+        state.homePage = state.historys.length <= 1;
       },
       [Types.SET_NEED_LOGIN](state, {needLogin}) {
         state.context.needLogin = needLogin;