comment

@@ -2,8 +2,8 @@
   <Layout class="article-detail">
     <RecycleScrollReveal :size="10" ref="scroll" @scroll="onScroll" :offset="2000" :on-fetch="onFetch" :manual-init="true">
       <template v-slot:eternalTop>
-        <ArticleDeatilLong v-if="article.sort == 2" ref="detailLong" :data="article" :scroll-top="scrollTop" :list-title="listTitle"></ArticleDeatilLong>
-        <ArticleDeatilNote v-else :data="article" :scroll-top="scrollTop" :list-title="listTitle"></ArticleDeatilNote>
+        <ArticleDeatilLong v-if="article.sort == 2" ref="detailLong" :data="article" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo"></ArticleDeatilLong>
+        <ArticleDeatilNote v-else :data="article" :scroll-top="scrollTop" :list-title="listTitle" :scroll-to="scrollTo"></ArticleDeatilNote>
       </template>
       <template class="article-item" #item="{ data }">
         <ArticleItem2
@@ -41,7 +41,7 @@ export default {
       scrolling: false,
       article: {},
       share: false,
-      listTitle: '推荐阅读',
+      listTitle: '',
       colWidthForTwo: 370,
       posId: 0
     };
@@ -91,6 +91,7 @@ export default {
         if (this.$refs.scroll) {
           this.$refs.scroll.$el.scrollTop = 0;
           this.$refs.scroll.clear();
+          this.listTitle = '';
 
           this.$nextTick(() => {
             this.$refs.scroll.init();
@@ -117,6 +118,7 @@ export default {
       });
 
       this.fetching = false;
+      this.recommendArticles[this.id] = true;
 
       if (result.code === 200) {
         list = get(result, 'data', []);
@@ -124,7 +126,7 @@ export default {
         if (!list || !list.length) {
           list = false;
         } else {
-          this.recommendArticles[this.id] = true;
+          this.listTitle = '推荐阅读';
         }
       } else {
         this.$createToast && this.$createToast({
@@ -135,6 +137,10 @@ export default {
       }
 
       return list;
+    },
+    scrollTo({scrollTop}) {
+      this.$refs.scroll.$el.scrollTop = scrollTop;
+      this.scrollTop = scrollTop;
     }
   },
   components: {

@@ -27,7 +27,7 @@
         <ProductGroup :data="recomendProduct" model="2"></ProductGroup>
       </div>
 
-      <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
+      <LayoutTitle v-if="listTitle" class="rec-article-title">{{listTitle}}</LayoutTitle>
     </div>
     <ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="onComment">
       <template v-slot:after>
@@ -54,7 +54,7 @@ import ArticleItemHeader from '../article/article-item-header';
 import ArticleItemTopics from '../article/article-item-topics';
 import ArticleDetailFooter from './article-footer';
 import ArticleDetailHeader from './article-header';
-import {mapState} from 'vuex';
+import {mapState, mapMutations} from 'vuex';
 
 export default {
   name: 'ArticleDetailLong',
@@ -67,7 +67,7 @@ export default {
     },
     listTitle: String,
     scrollTop: Number,
-    share: Boolean,
+    share: Boolean
   },
   data() {
     return {
@@ -131,7 +131,12 @@ export default {
       } else if (this.scrollTop > 0) {
         let step = Math.round(this.scrollTop - 10 / (this.coverHeight - 10) * 100);
 
-        return Math.max(Math.min(step, 100), 0);
+        step = Math.max(Math.min(step, 100), 0);
+        this.SET_STATUS_BAR_COLOR({
+          color: step > 55 ? 'black' : 'white'
+        });
+
+        return step;
       } else {
         return 0;
       }
@@ -143,7 +148,7 @@ export default {
       if (this.$refs && this.$refs.header) {
         scrollTop += this.$refs.header.$el.offsetHeight;
       }
-console.log(scrollTop, top, height)
+
       if (top && height) {
        if (scrollTop >= top + height) {
           return 100;
@@ -191,6 +196,7 @@ console.log(scrollTop, top, height)
     }
   },
   methods: {
+    ...mapMutations(['SET_STATUS_BAR_COLOR']),
     onClick() {
       if (this.share) {
         return this.$links.toDownloadApp();

@@ -17,10 +17,10 @@
       <ArticleDetailIntro :data="introData"></ArticleDetailIntro>
       <ArticleItemTopics class="topics-wrap" :data="topicsData" :share="share"></ArticleItemTopics>
       <p class="publish-time">{{publishTime}}</p>
-      <ArticleDetailCommentList v-if="data.commentCount" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
-      <LayoutTitle class="rec-article-title">{{listTitle}}</LayoutTitle>
+      <ArticleDetailCommentList ref="commentList" v-if="data.commentCount" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
+      <LayoutTitle v-if="listTitle" class="rec-article-title">{{listTitle}}</LayoutTitle>
     </div>
-    <ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="onComment">
+    <ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="toCommentList">
       <template v-slot:before>
         <div class="footer-comment">
           <CommentPlaceholder
@@ -67,7 +67,8 @@ export default {
     listTitle: String,
     scrollTop: Number,
     share: Boolean,
-    thumb: Boolean
+    thumb: Boolean,
+    scrollTo: Function
   },
   data() {
     return {
@@ -154,6 +155,15 @@ export default {
     },
     onComment() {
 
+    },
+    toCommentList() {
+      if (this.data.commentCount) {
+        if (this.$refs.commentList && this.scrollTo) {
+          this.scrollTo({scrollTop: this.$refs.commentList.$el.offsetTop});
+        }
+      } else {
+        this.$refs.commentInput.$el.click();
+      }
     }
   },
   components: {