随手记：树结构翻页和定位指定数据逻辑

业务背景：

树形组件展示数据，数据包含过去数据，现在数据，未来数据，用户在首次进入页面时，展示的是当天的数据，如果当天没有数据，则显示最近一条的过去数据。数据按照时间越长数据会越来越多，过去未来现在都可能有数据或者没有数据。

和后端约定数据返回结构：
约定一次性返回多少条数据作为首次进入的展示，今天的数据给一个标记，如果今天没有数据，则查询今天之前的一条数据作为标记返回。标记的只有一个。

前端思维点：
定位当前：
首次获取数据时，将数据赋值树形结构接收，给标记的数据设为唯一的id值，获取id元素距离最外层元素的距离，将滚动条距离顶部的距离等于id元素距离最外层元素的距离，可以实现首次进入定位到当前最近的数据作为展示。
向上翻页：当滚动条距离顶部的距离等于0的，做向上翻页，给后端传原返回数据第一个日期
向下翻页：当判断滚动条触底时，做向下翻页，给后端传原返回数据最后一个日期

      <div class="custom-tree-container font12">
        <div class="block tree-data" id="treeId">
          <el-tree
            :data="treedData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span slot-scope="{ node, data }" :id="data.labelId">
              <i v-if="data.children"></i>
              <span class="circle" v-else></span>
              <span class="text"  @click="treeItem(node, data)">{{ node.label}}</span>
            </span>
          </el-tree>
        </div>
      </div>

    // 获取标记今天的元素距离父元素的距离
    getOffSet() {
      this.treeEL = document.querySelector('.tree-data');
      this.todayEL = document.querySelector('#today');
      console.log('标记的数据距离元素的高度',this.todayEL.offsetTop)
      this.treeEL.addEventListener('scroll', this.getScrollTop,false)
    },
    // 监听鼠标距离顶部距离
    getScrollTop() {
      // console.log('监听鼠标距离顶部距离',this.treeEL.scrollTop)
      const clientHeight = this.treeEL.clientHeight;
      const scrollTop = this.treeEL.scrollTop;
      const scrollHeight = this.treeEL.scrollHeight;
      if (clientHeight + scrollTop === scrollHeight) {
        console.log('竖向滚动条已经滚动到底部，需要向下翻页')
      }
      if (scrollTop === 0) {
        console.log('竖向滚动条已经滚动到顶部，需要向上翻页')
      }
    },

目前就前端暂时画完了页面，后端还在接口设计，后续联调

待更新.....