列表自动向上滚动

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

  <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>