TALL-MUI-4/components/TimeLine/TimeLine.vue

<template>
  <!-- 时间间隔栏 -->
  <!-- <Barrier /> -->

  <scroll-view
    :lower-threshold="300"
    style="height: 800px;"
    scroll-y="true"
    :upper-threshold="300"
    :scroll-into-view="scrollToTaskId"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <TimeBox :tasks="tasks" />
  </scroll-view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import TimeBox from './component/TimeBox.vue';
import useGetTasks from '@/hooks/project/useGetTasks';

const props = defineProps({
  tasks: {
    type: Array,
    default: () => []
  }
})

const store = useStore();
const getTasksHook = useGetTasks();
const topEnd = computed(() => store.state.task.topEnd);
const bottomEnd = computed(() => store.state.task.bottomEnd);
const showSkeleton = computed(() => store.state.task.showSkeleton);
const timeNode = computed(() => store.state.task.timeNode);
const timeUnit = computed(() => store.state.task.timeUnit);
const scrollToTaskId = computed(() => store.state.task.scrollToTaskId);
const timeGranularity = computed(() => store.getters['task/timeGranularity']);
const downNextPage = computed(() => store.state.task.downNextPage); // 下一页
const upNextPage = computed(() => store.state.task.upNextPage); // 向上查下一页
const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
const emit = defineEmits(['getTasks']);

const data = reactive({ top: 0 });

// 滚动
function scroll(e) {
  data.top = e.detail.scrollTop;
  store.commit('task/setShrink', data.top > data.scrollTop);
  store.commit('task/setScrollTop', data.top);
}

// 滚动到顶部
async function handleScrollTop() {
  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks)
  console.warn('滚动到顶部: ');
  let params = { pageNum: upNextPage.value, queryType: 0 };
  getTasksHook.dataRender(params);
}

// 滚动到底部
async function handleScrollBottom() {
  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
  // 先把现在的任务放进去
  store.commit('task/updateTasks', props.tasks);
  console.warn('滚动到底部: ');

  let params = { pageNum: downNextPage.value, queryType: 1 };
  getTasksHook.dataRender(params);
}
</script>