关于前端:实现区域内数据一直循环滚动

39次阅读

共计 636 个字符，预计需要花费 2 分钟才能阅读完成。

html 布局

<div class="box" ref="scrollContainer">
  <div class="boxItem>111111</div>
  <div class="boxItem>111111</div>
  <div class="boxItem>111111</div>
</div>

代码局部：

mounted () {this.startScroll()
},
methods: {startScroll () {
    // 革除定时器
    clearTimeout(this.timer)
    // 定时器触发周期
    this.timer = setInterval(this.scroll, 30)
  },
  scroll () {if (this.$refs.scrollContainer) {
        const box = this.$refs.scrollContainer
        // 组件进行滚动
        box.scrollTop += 1
        // 判断滚动条是否滚动到底部
        if (box.scrollTop == box.scrollHeight - box.clientHeight) {
        // 获取组件第一个节点
        const firstNode = box.childNodes[0]
            box.scrollTop = 0
        // 删除节点
        box.removeChild(firstNode)
        // 将该节点拼接到组件最初
        box.append(firstNode)
    }
  }
 }
}

鼠标移入区域进行滚动
clearTimeout(this.timer)

鼠标移出区域持续滚动
this.startScroll()

正文完