<div class="rank">
<div
@mousemove="mousemove"
ref="tableRef"
style="height: 300px; overflow: hidden"
v-if="mouseMend"
>
<li
v-for="(item, index) of villageList"
@click="focusVillage(item)"
:class="{ active: activeVillage === item.id }"
:key="item"
>
<span class="index">
<img v-if="index === 0" src="../../../../assets/imageV2/奖牌-01.png" alt="" />
<img v-if="index === 1" src="../../../../assets/imageV2/奖牌-02.png" alt="" />
<img v-if="index === 2" src="../../../../assets/imageV2/奖牌-03.png" alt="" />
<span class="round-number" v-if="index > 2">{{ index + 1 }}</span>
</span>
<span class="village-name">{{ item.name }}</span>
<span class="event-count">{{ `${formatNumber(item.quota)}%` }}</span>
</li>
</div>
<div @mouseleave="mouseleave" v-else>
<li
v-for="(item, index) of villageList"
@click="focusVillage(item)"
:class="{ active: activeVillage === item.id }"
:key="item"
>
<span class="index">
<img v-if="index === 0" src="../../../../assets/imageV2/奖牌-01.png" alt="" />
<img v-if="index === 1" src="../../../../assets/imageV2/奖牌-02.png" alt="" />
<img v-if="index === 2" src="../../../../assets/imageV2/奖牌-03.png" alt="" />
<span class="round-number" v-if="index > 2">{{ index + 1 }}</span>
</span>
<span class="village-name">{{ item.name }}</span>
<span class="event-count">{{ `${formatNumber(item.quota)}%` }}</span>
</li>
</div>
</div>
//列表滚动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