You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
export default {
|
|
data() {
|
|
return {
|
|
scrollDom: null,
|
|
interval: null,
|
|
scrollTimer: null, // 滚动定时器
|
|
pauseTimer: null, // 暂停定时器
|
|
timeout: null,
|
|
step: null
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
// this.dataCompleteFun()
|
|
},
|
|
destroyed() {
|
|
// 清理定时器
|
|
clearTimeout(this.pauseTimer)
|
|
this.pauseTimer = null
|
|
clearInterval(this.scrollTimer)
|
|
this.scrollTimer = null
|
|
// 清理点击监听
|
|
window.document.removeEventListener('click', this.pauseScroll)
|
|
},
|
|
methods: {
|
|
autoScroll() {
|
|
// 滚动长度为0
|
|
if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) {
|
|
// 如果定时器存在
|
|
if (this.scrollTimer) {
|
|
// 则先清除
|
|
clearInterval(this.scrollTimer)
|
|
clearTimeout(this.pauseTimer)
|
|
this.scrollTimer = null
|
|
this.pauseTimer = null
|
|
}
|
|
this.scrollTimer = setInterval(() => {
|
|
const scrollHeight = this.scrollDom.scrollHeight
|
|
const clientHeight = this.scrollDom.clientHeight
|
|
const scroll = scrollHeight - clientHeight
|
|
// 获取当前滚动条距离顶部高度
|
|
const scrollTop = this.scrollDom.scrollTop
|
|
// 当滚动到底部时,间隔时间后重回顶部开始
|
|
if (scrollTop + this.step >= scroll) {
|
|
this.scrollDom.scrollTop = scroll
|
|
this.pauseTimer = setTimeout(() => {
|
|
this.scrollDom.scrollTop = 0
|
|
this.autoScroll()
|
|
}, this.timeout)
|
|
} else { // 没有则继续滚动
|
|
this.scrollDom.scrollTop = scrollTop + this.step
|
|
}
|
|
// console.log(scrollHeight, clientHeight, scroll, scrollTop)
|
|
}, this.interval)
|
|
} else {
|
|
return
|
|
}
|
|
}
|
|
}
|
|
}
|