vue3实现列表自动滚动

 

        

          

            
              
              
              
              {{ index + 1 }}
            
            {{ item.name }}
            {{ `${formatNumber(item.quota)}%` }}
          
        
        

          

            
              
              
              
              {{ index + 1 }}
            
            {{ item.name }}
            {{ `${formatNumber(item.quota)}%` }}
          
        
      

//列表滚动ref绑定初始化
const timer = ref(null)
const tableRef = ref(null)
const mouseMend = ref(true) //判断鼠标移入移出排行榜表格
//等同于vue2中的destroyed
onUnmounted(() => {
  //清除定时器
  clearTimeout(timer.value)
})
const mousemove = () => {
  mouseMend.value = false
  //清除定时器,如果希望在setInterval之前终止其运行就可以使用clearTimeout()
  clearTimeout(timer.value)
}
const mouseleave = () => {
  mouseMend.value = true
  start()
}

//开启定时器方法
const start = () => {
  //定时器触发周期
  let speed = ref(40)
  //setInterval会返回一个id,clearTimeout拿到该id才可清除
  timer.value = setInterval(MarqueeTest, speed.value)
}

const MarqueeTest = () => {
  let scroll = tableRef.value
  //组件进行滚动
  scroll.scrollTop += 1
  // console.log(scroll.scrollTop,scroll.scrollHeight, scroll.clientHeight)
  //判断滚动条是否滚动到底部
  if (scroll.scrollTop == scroll.scrollHeight - scroll.clientHeight) {
    //获取组件第一个节点
    let firstNode = scroll.childNodes[0]
    // //删除节点
    scroll.removeChild(firstNode)
    //将该节点拼接到组件最后
    scroll.append(firstNode)
  }
}

//用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

nextTick(() => {
  start()
})

ps

• scrollHeight:其中包括由于溢出而在屏幕上不可见的内容。（内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）
• scrollTop:有滚动条的时候，scrollTop 值是从元素顶部到其最顶部可见内容的距离的度量。当元素的内容没有垂直滚动条时，则scrollTop=0。
• clientHeight:样式的height+上下padding

• 判断内部元素滚动是否到底的表达式是：scrollHeight - scrollTop === clientHeight