清單資料滾動曝光埋點和點選埋點

使用的IntersectionObserver API

<template>
  <div class="job_list" v-if="showList.length > 0">
    <div class="title">清單title</div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我們是有底線的～"
      loading-text="内容加載中"
      :error.sync="error"
      error-text="請求失敗，點選重新加載"
      offset="160"
      @load="getList"
      v-if="showList.length > 0"
    >
      <ListCard
        v-for="(item, index) in showList"
        :key="index + 'likejobList'"
        :listItem="item"
        textType="corporateName"
        class="job_list_card"
        :data-jobid="item.jobId"
        :data-ojobid="oJobId"
        :data-impid="item.point.impid"
        :data-transinfo="JSON.stringify(item.point.algoMeta.transInfo)"
        @click.native="clickCard(oJobId, item.jobId, item.point.impid, item.point.algoMeta.transInfo)"
      ></ListCard>
    </van-list>
  </div>
</template>

<script>
import ListCard from './ListCard.vue'
import { List } from 'vant'
import { likeListDsLog, clickLikeListDsLog } from '../api/dslogList'
export default {
  name: 'likeList',
  components: {
    ListCard,
    [List.name]: List,
  },
  props: {
    companyList: {
      type: Array,
    },
    jobId: {
      type: [Number,String]
    }
  },
  watch: {
    companyList: {
      handler(newVal) {
        this.allList = newVal
        this.getList('now')
      },
      immediate: true,
      deep: true,
    },
    jobId: {
      handler(newVal) {
        this.oJobId = newVal
      },
      immediate: true,
    }
  },
  data() {
    return {
      oJobId: '',
      allList: [],
      showList: [],
      // 清單
      loading: false,
      finished: false,
      error: false,
      size: 5,
      target: 0,
    }
  },
  methods: {
    getList(tag) {
      let allarr = JSON.parse(JSON.stringify(this.allList))
      let arr = this.showList
      if(tag && allarr.length < 5 && allarr.length != 0){
        this.showList = allarr
        this.loading = false
        this.finished = true
        // 埋點-清單曝光
        this.initElementSensor()
        return
      }
      if (tag) {
        arr = arr.concat(
          allarr.slice(this.target * this.size, (this.target + 1) * this.size)
        )
        this.showList = arr
        this.loading = false
        this.target++
        if (arr.length >= this.allList.length || arr.length >= 20) {
          this.finished = true
        }
        // 埋點-清單曝光
        this.initElementSensor()
        return
      }
      setTimeout(() => {
        arr = arr.concat(
          allarr.slice(this.target * this.size, (this.target + 1) * this.size)
        )
        this.showList = arr
        this.loading = false
        this.target++
        if (arr.length >= this.allList.length || arr.length >= 20) {
          this.finished = true
        }
      }, 1000)
    },
    clickCard(jobid, ojobid, impid, transinfo){
      clickLikeListDsLog(jobid, ojobid, impid, transinfo)
    },
    // 清單曝光
    initElementSensor () {
      this.$nextTick(() => {
        const obserRef = new IntersectionObserver((entries) => {
          entries.forEach((v) => {
            const {jobid, ojobid, impid, transinfo} = v.target.dataset;//自定義
            if (v.isIntersecting) {
              //v.isIntersecting=true的時候表示露出
              likeListDsLog(jobid, ojobid, impid, transinfo)
            }
          });
        },{
          threshold: [1]
        });
        setTimeout(() => {
          const items = document.querySelectorAll(".job_list_card") || [];
          items.forEach((item) => {
            obserRef.observe(item);
          });
        }, 0);
      });
    },
  },
}
</script>

<style  scoped>
.job_list {
  background-color: #ffffff;
  overflow: hidden;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding: 20px 0 0 16px;
  }
}
</style>