hxgksystemapp/src/api/knowledge/scroll.js

// 滚动监听器
export function onScroll() {


    // 获取所有锚点元素
    const navContents = document.querySelectorAll('.models')
  
    // 所有锚点元素的 offsetTop
    const offsetTopArr = []
    navContents.forEach(item => {
      offsetTopArr.push(item.offsetTop)
    })
    // 获取当前文档流的 scrollTop
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    // 定义当前点亮的导航下标
    let navIndex = 0
    for (let n = 0; n < offsetTopArr.length; n++) {
      // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
      // 那么此时导航索引就应该是n了
      if (scrollTop+210 >= offsetTopArr[n]) {
        navIndex = n
      }
      //若滚动条已经到底则直接激活最后一个导航
      if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) {
        navIndex = offsetTopArr.length - 1;
      }
    }
    //active.value = navIndex
    return navIndex;
  }
  
  // 跳转到指定索引的元素
  export function scrollTo(index) {
  
  
    // 获取目标的 offsetTop
    // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
    const targetOffsetTop = document.querySelector(`.content .models:nth-child(${index + 1})`).offsetTop
    // 获取当前 offsetTop
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    // 定义一次跳 150 个像素
    const STEP = 50
    // 判断是往下滑还是往上滑
    if (scrollTop > targetOffsetTop) {
      // 往上滑
      smoothUp()
    } else {
      // 往下滑
      smoothDown()
    }
    // 定义往下滑函数
    function smoothDown() {
      // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
      if (scrollTop < targetOffsetTop) {
        // 如果和目标相差距离大于等于 STEP 就跳 STEP
        // 否则直接跳到目标点，目标是为了防止跳过了。
        if (targetOffsetTop - scrollTop >= STEP) {
          scrollTop += STEP
        } else {
          scrollTop = targetOffsetTop
        }
        document.body.scrollTop = scrollTop
        document.documentElement.scrollTop = scrollTop
        // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
        requestAnimationFrame(smoothDown)
      }
    }
    // 定义往上滑函数
    function smoothUp() {
      if (scrollTop > targetOffsetTop) {
        if (scrollTop - targetOffsetTop >= STEP) {
          scrollTop -= STEP
        } else {
          scrollTop = targetOffsetTop
        }
        document.body.scrollTop = scrollTop
        document.documentElement.scrollTop = scrollTop
        requestAnimationFrame(smoothUp)
      }
    }
  }
  export function formatDate(timestamp) {
    var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  
    var Y = date.getFullYear() + '-';
  
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  
    var D = date.getDate() + ' ';
  
    var h = date.getHours() + ':';
  
    var m = date.getMinutes() + ':';
  
    var s = date.getSeconds();
  
    return Y+M+D+h+m+s;
  }