tall-mui-3-project/src/components/TimeLine/TimeLine.vue

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

  <scroll-view
    :lower-threshold="300"
    :scrollTop="top"
    :scrollY="true"
    :upper-threshold="300"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <!-- 时间轴 -->
    <u-divider bg-color="#f3f4f6" class="pt-5" v-if="topEnd">到顶啦</u-divider>
    <TimeBox />
    <u-divider bg-color="#f3f4f6" class="pb-5" v-if="bottomEnd">到底啦</u-divider>
  </scroll-view>
</template>

<script>
// import Barrier from './component/Barrier.vue';
import { mapState, mapMutations } from 'vuex';
import TimeBox from './component/TimeBox.vue';

export default {
  name: 'TimeLine',
  components: { TimeBox },
  data() {
    return { top: 0 };
  },

  computed: mapState('home', ['scrollTop', 'showTips', 'visibleRoles', 'tasks', 'topEnd', 'bottomEnd']),

  mounted() {
    this.setDatumPoint();
  },

  methods: {
    ...mapMutations('home', ['setScrollTop', 'setShrink', 'setRoleId']),

    // 滚动
    scroll(e) {
      this.top = e.detail.scrollTop;
      this.setShrink(this.top > this.scrollTop);
      this.setScrollTop(this.top);
    },

    // 滚动到顶部
    async handleScrollTop() {
      if (this.topEnd) return;
      const upQuery = {
        timeNode: +this.tasks[0].planStart,
        queryType: 0,
        queryNum: 6,
      };
      await this.$emit('getTasks', upQuery);
    },

    // 滚动到底部
    async handleScrollBottom() {
      if (this.bottomEnd) return;
      // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
      const cycle = this.$t.time.computeCycle('天');
      const timeNode = this.$t.time.add(+this.tasks[this.tasks.length - 1].planStart, 1, cycle).valueOf();
      const downQuery = {
        timeNode,
        queryType: 1,
        queryNum: 6,
      };
      await this.$emit('getTasks', downQuery);
    },

    // 设置基准点
    setDatumPoint() {
      const { tasks } = this;
      if (tasks && tasks.length) {
        let tasksHeight = 0;
        const scrollHeight = document.getElementById('scroll').clientHeight;
        let width = document.documentElement.clientWidth;
        for (let i = 0; i < 3; i++) {
          // TODO: 高度不对
          if (tasks[i].panel && tasks[i].panel.height) {
            // 如果后台返回了高度，就用返回得任务面板高度 + 固定边距42
            tasksHeight += +tasks[i].panel.height + 42;
          } else {
            // 如果没有返回高度，就用rem + 固定边距42
            // 因为 u-card 在没有返回高度时 固定高度为 h-16 = 4rem
            // 所里这里 += 1rem + 42 = width / 20 + 42
            tasksHeight += (width / 20) * 4 + 42;
          }
        }
        this.top = tasksHeight - scrollHeight / 2;
        console.log('this.top: ', this.top);
      }
    },
  },
};
</script>