<!--
 * @Author: aBin
 * @email: binbin0314@126.com
 * @Date: 2021-07-19 14:15:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-20 15:01:45
-->
<template>
  <view class="main">
    <Barrier />
    <scroll-view :scrollY="true" :scrollTop="top" :style="{ height: height }" @scroll="scroll">
      <!-- <scroll-view scroll-y="true" style="height: 400px"> -->
      <TimeBox />
    </scroll-view>
    <Tips />
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Barrier from './components/Barrier.vue';
import TimeBox from './components/TimeBox.vue';
import Tips from 'components/Tips/index.vue';
export default {
  name: 'TimeLine',
  components: { Barrier, TimeBox, Tips },
  data() {
    return { height: '', top: 0 };
  },
  computed: mapState('home', ['scrollTop', 'showTips']),
  mounted() {
    this.height = document.getElementsByClassName('main')[0].clientHeight - 30 + 'px';
  },
  methods: {
    ...mapMutations('home', ['setScrollTop', 'setShrink']),
    scroll(e) {
      this.top = e.detail.scrollTop;
      this.setShrink(this.top > this.scrollTop);
      this.setScrollTop(this.top);
    },
  },
};
</script>
