先上代码

1.获取页面距离, 在nuxt.js里距离不对,原因服务端渲染

解决:把hock代码注释

 hooks: {
    // 'render:route': (url, result) => {
    //   this.$ = cheerio.load(result.html, {
    //     decodeEntities: false
    //   });
    //   //由于window.__nuxt__总是位于body中的第一个script中,
    //   //所以我移除了body中第一个脚本标签
    //   this.$(`body script`).eq(0).remove();
    //   result.html = this.$.html()
    // }
  }
  this.$nextTick(() => {
        let pcEnd = document.getElementById("pcEnd")
        if (pcEnd) {
          let pcTop = getElementTop(pcEnd)
          this.pcTop = pcTop
        }
        let mEnd = document.getElementById("mEnd")
        if (mEnd) {
          let mTop = getElementTop(mEnd)
          this.mTop = mTop
        }
        window.addEventListener("scroll", this.theEnd, true);
      })
//获取绝对位置的横坐标和纵坐标
export function getElementLeft(element) {
  var actualLeft = element.offsetLeft;
  var current = element.offsetParent;
  while (current !== null) {
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
  }
  return actualLeft;
}

export function getElementTop(element) {
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null) {
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }
  return actualTop;
}

2.事件监听

发现不能移除事件监听  解决,在addenventlistener("","",第三个参数true)

3.处理异步

当添加true之后,发现埋点事件没有上报了

解决:埋点是一个异步操作,没用异步前会先让tag 变为true,之后直接去除了事件监听,所以事件没有上报了 解决用promise

  theEnd() {

        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (window.innerWidth > 766) {
          let promise = new Promise((resolve, reject) => {
            if (scrollTop > this.pcTop) {
              window.sensorsDataAnalytic201505.track('articlePageBottomOut', {
                article_id: this.artData.id,
                article_title: this.artData.title,
                article_type: this.artData.type,
                product_line: "官网WEB",
              });
              resolve();
            }
          });
          promise.then((res) => {
            this.tag = true
            if (this.tag) {
              window.removeEventListener("scroll", this.theEnd, true)
            }
          })
        } else {
          let promise = new Promise((resolve, reject) => {
            if (scrollTop > this.mTop) {
              window.sensorsDataAnalytic201505.track('articlePageBottomOut', {
                article_id: this.artData.id,
                article_title: this.artData.title,
                article_type: this.artData.type,
                product_line: "官网h5",
              });
              resolve();
            }
          });
          promise.then((res) => {
            this.tag = true
            if (this.tag) {
              window.removeEventListener("scroll", this.theEnd, true)
            }
          })

        }
      },
09-01 02:09
查看更多