先上代码
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)
}
})
}
},