vue实现横向时间轴，并实现右滑加载数据

最新推荐文章于 2024-07-17 17:23:23 发布

cccc☜

最新推荐文章于 2024-07-17 17:23:23 发布

阅读量761

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46561899/article/details/139587113

版权

1、横向时间轴

 <template>
<div class="part-label-box">
                  <el-timeline class="time-line">
                    <el-timeline-item
                      class="line-item"
                      v-for="(activity, index) in planDetailsList"
                      :key="index"
                    >
                      <div class="title">{{ activity.actionDate }}</div>
                      <div class="image">
                        <el-image
                          style="width: 6vw; height: 4vw"
                          v-if="activity.actionTypeIcon"
                          :src="activity.actionTypeIcon"
                          :preview-src-list="[activity.actionTypeIcon]"
                          :initial-index="0"
                          fit="cover"
                          :preview-teleported="true"
                        />
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
</template>
<style>
         .part-label-box {
                width: calc(100% - 6vw);
                height: 26vh;
                box-sizing: border-box;
                overflow-x: auto;
                padding-left: 1vw;

                .time-line {
                  display: flex;
                  margin: 1vw 0;
                  box-sizing: border-box;

                  .line-item {
                    min-width: 25%;
                    flex-shrink: 0;
                    display: flex;
                    flex-direction: column;

                    .title {
                      color: #01d8eb;
                      margin-bottom: 0.2vw;
                    }
                    .image {
                      width: 6vw;
                      height: 4vw;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }
                  }
                }
              }

              :deep(.el-timeline-item__tail) {
                border-left: none;
                border-top: 2px solid #e4e7ed;
                width: 100%;
                position: absolute;
                top: 6px;
              }

              :deep(.el-timeline-item__wrapper) {
                padding-left: 0;
                position: absolute;
                top: 20px;
                transform: translateX(-50%);
                text-align: center;
              }

              :deep(.el-timeline-item__timestamp) {
                font-size: 14px;
              }

</style>

2、右滑加载数据

<script>
const pageState = reactive({
  listQuery: {
    page: 1,
    limit: 10,
  },
  total: 0,
});
function handleScroll() {
  const container = document.getElementById("part-box") as HTMLElement;
  if (container.scrollWidth - container.clientWidth <= container.scrollLeft) {
    if (planDetailsList.value.length < pageState.total) {
      pageState.listQuery.page++;
     //逻辑代码
    }
  }
}
</script>

<template>
  <div class="part-label-box" id="part-box" @scroll="handleScroll()">
 </div>
</template>