vue3原生方法滚动列表

效果图

代码

import { ref, onBeforeUnmount, onUnmounted } from "vue";
//定时器初始化
let timer = ref(null);
//ref绑定初始化
let roll = ref(null);
//等同于vue2中的beforeDestroy
onBeforeUnmount(() => {
	//清除定时器
	clearTimeout(timer.value);
});
//等同于vue2中的destroyed
onUnmounted(() => {
	//清除定时器
	clearTimeout(timer.value);
});
/**
 * @Description: 鼠标移动事件
 * @Author: admin
 */
function testMove() {
	clearTimeout(timer.value);
}
/**
 * @Description: 鼠标离开事件
 * @Author: admin
 */
function testMend() {
	start();
}
//开启定时器方法
function start() {
	//清除定时器
	clearTimeout(timer.value);
	//定时器触发周期
	let speed = ref(25);
	timer.value = setInterval(MarqueeTest, speed.value);
}
function MarqueeTest() {
	let test1 = roll.value;
	//判断组件是否渲染完成
	if (test1.offsetHeight == 0) {
		test1 = roll.value;
	} else {
		//如果列表数量过少不进行滚动
		if (test1.childNodes.length < 6) {
			clearTimeout(timer.value);
			return;
		}
		//组件进行滚动
		test1.scrollTop += 1;
		//判断滚动条是否滚动到底部
		if (test1.scrollTop == test1.scrollHeight - test1.clientHeight) {
			//获取组件第一个节点
			let a = test1.childNodes[0];
			//删除节点
			test1.removeChild(a);
			//将该节点拼接到组件最后
			test1.append(a);
		}
	}
}
let tableData = ref([]);
// init 方法是我暴露的方法，父组件通过调用这个方法传递列表的数据
const init = val => {
	tableData.value = val;
	//注
	//示例中 listData 写的静态数据 可以直接调用start()
	//如果是接口获取 listData 列表时 需在 nextTick 中调用 start()；否则，
	//进入页面不会滚动 必须鼠标移入移出才会滚动
	//用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

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

defineExpose({
	init
});

样式

首先，你开始循环的盒子的外部的盒子要设置高度和overflow，overflow: scroll，是鼠标移入，可以滑动，overflow: hidden，是鼠标移入没法滚动，

.scrollClass {
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.scrollClass::-webkit-scrollbar {
	display: none;
}