});
this.titleTime = this.listData[0].time; // 默认展示第一项日期
},
scrollTop() {
let scrollTop = document.documentElement.scrollTop + 80 / 2; // 卷去的距离
this.timeList.map((res, i) => {
if (scrollTop < this.timeList[0]) {
console.log(scrollTop);
this.titleTime = this.listData[0].time; // 第一项 日期展示
return;
}
if (scrollTop >= this.timeList[i] && scrollTop < this.timeList[i + 1]) {
console.log(“区间”, this.timeList[i]);
this.titleTime = this.listData[i + 1].time; // 第二项之后
}
});
},
},
mounted() {
window.addEventListener(“scroll”, this.scrollTop); // 监听 scroll
this.init();
},
};
js写法代码有些冗余有啥好的办法咧,我们可以用css的骚操作。
css核心两段代码:
position: sticky;
top: 0;
css方法效果:
css方法完整代码:
{{ item.time }}
class=“country”
v-for=“(items, index) in item.country”
:key=“index”
{{ items.name }}