列表自动向上滚动 鼠标放上去 自动停止滚动
<div id="list-detail-main">
<div class="my_table_thead_tr">
<div v-for="(item, index) in header" :key="index" class="my_table_thead_th">
{{ item }}
</div>
</div>
<div
ref="contentScroll"
class="my_table_tbody"
@mousemove="move"
@mouseleave="leave"
@mousewheel="wheel"
>
<div v-for="(item, ind) in dataset" :key="ind" class="my_table_tbody_tr">
<div
v-for="(value, index) in item"
:key="index"
class="my_table_tbody_td"
:class="[{ is_special_col: index === 0 }]"
>
{{ value }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="SickDetailListDetailComponent">
import { ref, onBeforeUnmount, onUnmounted, watch } from 'vue';
const props = defineProps({
header: {
type: Array,
default: () => [],
},
dataset: {
type: Array,
default: () => [],
},
});
// 定时器初始化
const timer = ref();
// content实例
const contentScroll = ref();
watch(
() => props.dataset,
() => {
if (props.dataset.length > 6) {
start();
}
},
{
deep: true,
},
);
onBeforeUnmount(() => {
// 清除定时器
clearTimeout(timer.value);
});
onUnmounted(() => {
// 清除定时器
clearTimeout(timer.value);
});
/**
* @Description: 鼠标移动事件
* @Author: TQ
*/
function move() {
clearTimeout(timer.value);
}
/**
* @Description: 鼠标离开事件
* @Author: TQ
*/
function leave() {
if (props.dataset.length > 6) {
start();
}
}
const wheel = (e) => {
if (e.deltaY > 0) {
contentScroll.value.scrollTop += 10;
} else {
contentScroll.value.scrollTop -= 10;
}
};
// 开启定时器方法
function start() {
// 清除定时器
clearTimeout(timer.value);
// 定时器触发周期
const speed = ref(75);
timer.value = setInterval(scrollCore, speed.value);
}
// 滚动事件核心
function scrollCore() {
// 判断组件是否渲染完成
// 如果列表数量过少不进行滚动
if (contentScroll.value.childNodes.length < 6) {
clearTimeout(timer.value);
return;
}
// 组件进行滚动
contentScroll.value.scrollTop += 1;
// 判断滚动条是否滚动到底部
if (
contentScroll.value.scrollTop ===
contentScroll.value.scrollHeight - contentScroll.value.clientHeight
) {
// 获取组件第一个节点
const a = contentScroll.value.childNodes[0];
// 删除节点
contentScroll.value.removeChild(a);
// 将该节点拼接到组件最后
contentScroll.value.append(a);
}
}
</script>
<style lang="scss" scoped>
.is_special_col {
color: #c4c4c4 !important;
text-align: left !important;
}
#list-detail-main {
padding-bottom: 20px;
padding-left: 16px;
pointer-events: auto;
.my_table_thead_tr {
display: flex;
justify-content: space-between;
width: 432px;
padding: 0 8px;
.my_table_thead_th {
color: #356eff;
}
}
.my_table_tbody {
width: 432px;
height: 220px;
margin-top: 5px;
overflow: hidden;
.my_table_tbody_tr {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 8px;
margin: 5px 0;
background-color: #0f1726;
border: 1px solid transparent;
&:hover {
border: 1px solid #d5f31d;
}
.my_table_tbody_td {
font-size: 12px;
color: #5fe3ff;
text-align: center;
&:first-child {
width: 80px;
}
&:nth-child(2) {
width: 64px;
}
&:nth-child(3) {
width: 80px;
}
&:nth-child(4) {
width: 64px;
}
&:last-child {
width: 64px;
}
}
}
}
}
</style>