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.
97 lines
2.4 KiB
97 lines
2.4 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"
|
|
>
|
|
<!-- 时间轴 -->
|
|
<u-divider bg-color="#f3f4f6" v-if="topEnd">到顶啦</u-divider>
|
|
<TimeBox />
|
|
<u-divider bg-color="#f3f4f6" 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 downQuery = {
|
|
timeNode: +this.tasks[this.tasks.length - 1].planStart,
|
|
queryType: 1,
|
|
queryNum: 6,
|
|
};
|
|
console.log('downQuery: ', downQuery);
|
|
await this.$emit('getTasks', downQuery);
|
|
},
|
|
|
|
// 设置基准点
|
|
setDatumPoint() {
|
|
const { tasks } = this;
|
|
if (tasks && tasks.length) {
|
|
let tasksHeight = 0;
|
|
const scrollHeight = document.getElementById('scroll').clientHeight;
|
|
for (let i = 0; i < 3; i++) {
|
|
// TODO: 高度不对
|
|
// if (tasks[i].panel && tasks[i].panel.height) {
|
|
// tasksHeight += +tasks[i].panel.height + 42;
|
|
// }
|
|
}
|
|
this.top = tasksHeight - scrollHeight / 2;
|
|
console.log('this.top: ', this.top);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|