forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.1 KiB
88 lines
2.1 KiB
<!--
|
|
* @Author: aBin
|
|
* @email: binbin0314@126.com
|
|
* @Date: 2021-07-19 14:15:35
|
|
* @LastEditors: aBin
|
|
* @LastEditTime: 2021-07-20 14:22:11
|
|
-->
|
|
<template>
|
|
<!-- 时间间隔栏 -->
|
|
<!-- <Barrier /> -->
|
|
<scroll-view
|
|
:lower-threshold="300"
|
|
:scrollTop="top"
|
|
:scrollY="true"
|
|
:upper-threshold="300"
|
|
@scroll="scroll"
|
|
@scrolltolower="handleScrollBottom"
|
|
@scrolltoupper="handleScrollTop"
|
|
id="scroll"
|
|
>
|
|
<!-- 时间轴 -->
|
|
<TimeBox />
|
|
</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']),
|
|
|
|
mounted() {
|
|
// 设置默认基准点
|
|
// let tasksHeight = 0;
|
|
// const scrollHeight = document.getElementById('scroll').clientHeight;
|
|
// if (this.visibleRoles && this.visibleRoles.length) {
|
|
// for (let i = 0; i < 3; i++) {
|
|
// tasksHeight += this.visibleRoles[i].panel.height - 0 + 42;
|
|
// }
|
|
// this.top = tasksHeight - scrollHeight / 2;
|
|
// }
|
|
// console.log('this.top: ', this.top);
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations('home', ['setScrollTop', 'setShrink', 'setRoleId']),
|
|
|
|
// 滚动
|
|
scroll(e) {
|
|
this.top = e.detail.scrollTop;
|
|
this.setShrink(this.top > this.scrollTop);
|
|
this.setScrollTop(this.top);
|
|
},
|
|
|
|
// 滚动到顶部
|
|
handleScrollTop() {
|
|
console.log('滚动到顶部');
|
|
this.$emit('getTasks', 0);
|
|
},
|
|
|
|
// 滚动到底部
|
|
handleScrollBottom() {
|
|
console.log('滚动到底部');
|
|
this.$emit('getTasks', 0);
|
|
},
|
|
|
|
// 设置基准点
|
|
setDatumPoint() {
|
|
const { tasks } = this;
|
|
if (tasks && tasks.length) {
|
|
let tasksHeight = 0;
|
|
const scrollHeight = document.getElementById('scroll').clientHeight;
|
|
for (let i = 0; i < 3; i++) {
|
|
tasksHeight += +tasks[i].panel.height + 42;
|
|
}
|
|
this.top = tasksHeight - scrollHeight / 2;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|