1.data里定义timeInter
timeInter :null
2.mounted里应用定时器
this.timeInter = setInterval(() => {
this.Marquee() // methods里的方法
}, 70)
3.methods
var demo = document.getElementById('demo')
var demo1 = document.getElementById('demo1')
var demo2 = document.getElementById('demo2')
demo2.innerHTML = document.getElementById('demo1').innerHTML
if (demo.scrollLeft - demo2.offsetWidth >= 0) {
demo.scrollLeft -= demo1.offsetWidth
} else {
demo.scrollLeft++
}
4.切换页面销毁定时器:vue3使用beforeUnmount()
beforeUnmount() {
console.log('idLLLL:', this.timeInter)
clearInterval(this.timeInter);
// this.stopColor()
this.timeInter = null
},
完整代码:
<template>
<div>
<div id="demo" class="qimo8">
<div class="qimo">
<div id="demo1">
<ul>
<li v-for="(item,index) in dataList" :key="index">
<p>{{ item.text}}</p>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
</template>
<script>
export default{
data() {
return {
timeInter: null
}
},
mounted() {
// 使用定时器
this.timeInter = setInterval(() => {
this.Marquee() // methods里的方法
}, 70)
},
methods: {
Marquee() {
var demo = document.getElementById('demo')
var demo1 = document.getElementById('demo1')
var demo2 = document.getElementById('demo2')
demo2.innerHTML = document.getElementById('demo1').innerHTML
if (demo.scrollLeft - demo2.offsetWidth >= 0) {
demo.scrollLeft -= demo1.offsetWidth
} else {
demo.scrollLeft++
}
}
},
// 离开当前页面销毁定时器
beforeUnmount() {
console.log('idLLLL:', this.timeInter)
clearInterval(this.timeInter);
this.timeInter = null
},
}
</script>