当我们使用滚动监听,并由无限滚动上下滑动,同时兼顾发送请求
那么这是就会出现一个问题
如何在请求到数据,并渲染完dom操作,将滚动条设置到我们想要的地方
核心技术:watch 监听 + $nextTick()
下面上代码
监听
mounted() {
this.box = this.$refs.container
// 监听这个dom的scroll事件
this.box.onscroll = cardList => {
this.handleScroll(cardList)
}
},
监听函数
handleScroll: throttle(100, function (cardList) {
this.$nextTick(() => {
const scrollData = this.$refs.container
const viewH = scrollData.clientHeight // 可见高度
const contentH = scrollData.scrollHeight // 总高度
const scrollTop = scrollData.scrollTop // 滚动高度
// 下滑到底部时 Math.ceil为了兼容浏览器差别
if (viewH + Math.ceil(scrollTop) > contentH ) {
// console.log(scrollTop, contentH, viewH)
你想做的事
} else if (Math.ceil(scrollTop) == 0) {
// 上滑到顶部时
你想做的事
} else {
const cardList = [...document.querySelectorAll('.Bracket .item')] ?? []
for (let index = cardList.length - 1; index >= 0; index--) {
const card = cardList[index]
// if (card.id.split('-')[1] < this.currentMainTermIndex) break
if (scrollTop - card.offsetTop >= 0) {
滑动到你的class div 做的事
break
}
}
}
})
}),
滚动条设置
watch: {
// 滚动条设置
监听数据(或请求回来的数据): {
handler() {
this.$nextTick(() => {
const scrollData = this.$refs.container
scrollData.scrollTop = 10
// 滚动条设置
})
}
deep: true,
},
},
最后别忘了组件销毁清除监听器
destroyed() {
document.removeEventListener('scroll', this.handleScroll)
},