feat(articleDetail.vue) 详情页瀑布流曝光上报 reviewed by 郭帅

 <template>
 <template>
   <LayoutApp class="article-detail-container" :show-back="true" title="社区详情">
   <LayoutApp class="article-detail-container" :show-back="true" title="社区详情">
-    <div class="detail-container">
+    <div ref="detailContainer" class="detail-container" @scroll="onScroll">
 
 
       <div class="author-container">
       <div class="author-container">
         <ArticleAuthor />
         <ArticleAuthor />
@@ -30,12 +30,14 @@
       <div class="recommend-container">
       <div class="recommend-container">
         <div class="recommend-text">推荐阅读</div>
         <div class="recommend-text">推荐阅读</div>
           <ClientOnly>
           <ClientOnly>
-            <waterFallList
+            <waterFallList ref="waterfallComp"
               :listData="recommendArticleList"
               :listData="recommendArticleList"
               :item-w="344" :gutter-w="15"
               :item-w="344" :gutter-w="15"
               @update-praise="onUpdatePraise"
               @update-praise="onUpdatePraise"
               :yasParams="yasParams"
               :yasParams="yasParams"
               :yasOP="yasOP"
               :yasOP="yasOP"
+              :parentHeight="parentHeight"
+              :needParent="true"
             >
             >
             </waterFallList>
             </waterFallList>
           </ClientOnly>
           </ClientOnly>
@@ -73,7 +75,8 @@ export default {
   data() {
   data() {
     return {
     return {
       yasParams: {P_NAME: 'XY_UFOArticleDetail', P_PARAM: this.articleId},
       yasParams: {P_NAME: 'XY_UFOArticleDetail', P_PARAM: this.articleId},
-      yasOP: 'XY_STROLL_LIST_ACT_C'
+      yasOP: 'XY_STROLL_LIST_ACT_C',
+      parentHeight: 0
     };
     };
   },
   },
   computed: {
   computed: {
@@ -129,6 +132,10 @@ export default {
         articleId,
         articleId,
         status
         status
       });
       });
+    },
+    onScroll() {
+      this.parentHeight = this.$refs.detailContainer.clientHeight;
+      this.$refs.waterfallComp.scroll();
     }
     }
   }
   }
 };
 };
@@ -142,6 +149,10 @@ export default {
 }
 }
 
 
 .detail-container {
 .detail-container {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
   background: #fff;
   background: #fff;
 }
 }
 
 

@@ -79,6 +79,14 @@ export default {
     yasOP: { // 用于监测点击事件的名称
     yasOP: { // 用于监测点击事件的名称
       type: String,
       type: String,
       default: ''
       default: ''
+    },
+    parentHeight: { // 如果有父级元素包含此组件，请传递屏幕高度
+      type: Number,
+      default: 0
+    },
+    needParent: {
+      type: Boolean,
+      default: false
     }
     }
   },
   },
   data() {
   data() {
@@ -135,6 +143,7 @@ export default {
   mounted() {
   mounted() {
     console.log('mounted');
     console.log('mounted');
     this.checkLogin();
     this.checkLogin();
+    // console.log('scrollParent=', this.scrollParent);
   },
   },
   methods: {
   methods: {
     loadMore() {
     loadMore() {
@@ -145,12 +154,12 @@ export default {
       this.scrollTop = this.$refs.waterfall.scrollTop;
       this.scrollTop = this.$refs.waterfall.scrollTop;
       this.$refs.waterfallComp.emitLoadMore();
       this.$refs.waterfallComp.emitLoadMore();
 
 
-      let containerHeight = this.$refs.waterfall.offsetHeight; // 容器高度
+      let containerHeight = this.needParent ? this.parentHeight : this.$refs.waterfall.offsetHeight; // 容器高度
       let headerHeight = document.querySelector('.header') ? document.querySelector('.header').offsetHeight : 0; // 头部高度
       let headerHeight = document.querySelector('.header') ? document.querySelector('.header').offsetHeight : 0; // 头部高度
 
 
       this.scrollHandler({containerHeight: containerHeight, scrollTop: this.scrollTop, headerHeight: headerHeight});
       this.scrollHandler({containerHeight: containerHeight, scrollTop: this.scrollTop, headerHeight: headerHeight});
     },
     },
-    scrollHandler({containerHeight, scrollTop, headerHeight}) {
+    scrollHandler({containerHeight, scrollTop, headerHeight, containerOffsetTop}) {
       if (this.timeout) {
       if (this.timeout) {
         clearTimeout(this.timeout);
         clearTimeout(this.timeout);
         this.timeout = null;
         this.timeout = null;
@@ -158,7 +167,7 @@ export default {
 
 
       let items = document.querySelectorAll('.cell-item:not(.collect)');
       let items = document.querySelectorAll('.cell-item:not(.collect)');
 
 
-      items.forEach((item) => { // 遍历元素，判断在可视区域的元素加上collect并加入上报数组，此方法不可重复曝光
+      items.forEach((item, index) => { // 遍历元素，判断在可视区域的元素加上collect并加入上报数组，此方法不可重复曝光
         let isCollected = /collect/.test(item.className);
         let isCollected = /collect/.test(item.className);
         let bounding = item.getBoundingClientRect();
         let bounding = item.getBoundingClientRect();
 
 
@@ -167,7 +176,7 @@ export default {
             item.className += ' collect';
             item.className += ' collect';
 
 
             let yasParam = Object.assign({}, this.yasParams, {
             let yasParam = Object.assign({}, this.yasParams, {
-              I_INDEX: item.dataset.index,
+              I_INDEX: parseInt(item.dataset.index, 10) + 1,
               ARTICLE_ID: item.dataset.id
               ARTICLE_ID: item.dataset.id
             });
             });
 
 
@@ -191,7 +200,11 @@ export default {
 
 
     },
     },
     isVisible(top, scrollTop, containerHeight, headerHeight) { // 判断元素是否在可视区域
     isVisible(top, scrollTop, containerHeight, headerHeight) { // 判断元素是否在可视区域
+      if (this.needParent && !this.parentHeight) {
+        return false;
+      }
       if (top - headerHeight > 0 && (top - headerHeight) < containerHeight - 100) {
       if (top - headerHeight > 0 && (top - headerHeight) < containerHeight - 100) {
+        // console.log(top, scrollTop, containerHeight, headerHeight, (top-headerHeight));
         return true;
         return true;
       } else {
       } else {
         return false;
         return false;