列表自动向上滚动

列表自动向上滚动 鼠标放上去 自动停止滚动

  <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><divref="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"><divv-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>