前言
网上有挺多第三方库可以调用,但是怕会有影响自己的项目就没有使用,自己写一个简单的循环滚动列表记录下简单的说就是通过连续位移造成的假象
一、代码
1.html片段
代码如下(示例):
明了一点就把css内嵌
<div style="border:1px solid;height: 32px;width:60%;overflow: hidden;white-space: nowrap;">
<div ref="testnode">
<div id="test-begin" ref="testbegin" style="display: inline;">
<span style="margin-right:20px;">第一条很长很长很长很长很长很长</span>
<span style="margin-right:20px;">第二条很长很长很长很长很长很长</span>
<span style="margin-right:20px;">第三条很长很长很长很长很长很长</span>
<span style="margin-right:20px;">第四条很长很长很长很长很长很长</span>
<span style="margin-right:20px;">第五条很长很长很长很长很长很长</span>
<span style="margin-right:20px;">第六条很长很长很长很长很长很长</span>
</div>
<div id="test-end" ref="testend" style="display: inline;" v-html="testEndHtml"></div>
</div>
2.script片段
代码如下(示例):
export default {
name: 'Test',
data() {
return {
testNode: '',
testBeginDiv: '',
testEndDiv: '',
testEndHtml: '',
testTimer: null,
testDistance: 0,
testSpeed: 60,
}
},
mounted() {
this.testStarMoveFunc()
},
destroyed() {
clearInterval(this.testTimer) // 清除定时器
},
methods: {
testStarMoveFunc() {
this.testNode = this.$refs.testnode //获取外层盒子
this.testBeginDiv = this.$refs.testbegin // 获取开始盒子
this.testEndDiv = this.$refs.testend // 获取结束盒子
console.log(this.testNode.offsetWidth, this.testBeginDiv.offsetWidth, this.testEndDiv.offsetWidth) // 获取三个盒子宽度
if (this.testBeginDiv.offsetWidth > this.testNode.offsetWidth) {
this.testEndHtml = this.testBeginDiv.innerHTML // 开始盒子的内容赋值到结束盒子
this.testTimer = setInterval(() => {
this.testDistance = this.testDistance - 1
// 如果位移超过文字宽度,则回到起点
if (-this.testDistance >= this.testBeginDiv.offsetWidth) {
this.distance = 0
}
this.$refs.testnode.style.transform = 'translateX(' + this.testDistance + 'px)'
}, this.testSpeed)
}
},
},
}