详情页点击标题，滚动到对应主题笔记

详情页点击标题，滚动到对应主题

// 防抖
// 提高性能，不做频繁操作
// 详情页点击标题，滚动到对应主题
// $netxTick 图片的高度没有被计算在内
// 这里是等图片加载完成后获得相对$ref.名.$el.offsetTop的值 ，如果不等图片加载完，获取的值不准确，即使dom加载完了
// 另一种方法是在 updated 生命函数操作，但会赋值很多次，因为会更新很多次

// 在工具函数utils.js
export function debouce(func, delay=50) {
    let timer = null
    return function (...args) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            func(...args)
        },delay)
    }
}

// 怎么用
// 在需要用到的页面引入

import { debouce} from 'common/utils'         // .js 后缀可以省略的

data() {
    return {
        themeTopYs = []
        getThemeTopY： null
    }
}
created() {
    //给getThemeTopY 赋值
    this.getThemeTopY = debouce(() => {
        this.themeTopYs = []
        this.themeTopYs.push(0)
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)     //这里param是子组件里的$ref名字，
        // <detail-param-info ref="param" :param-info="paramInfo"></detail-param-info>
        // import DetailParamInfo from './childComps/DetailParamInfo'
        //  components: {DetailParamInfo,}
        //  引用子组件用驼峰命名，写进html里时组件名用杠——
    })
}
methods: {
     // titleClick(index) {
     //    console.log(this.themeTops[index]);
     //    this.$refs.scroll.scrollTo(0, -this.themeTops[index], 100)
     //  },
    detailTmageLoad() {        // 这个函数是指图片加载完成后，函数就不在这里写出了，明白逻辑就好
        this.getThemeTopY()    //在这里调用
    }

}

滚动详情，标题发生对应改变

// 监听scroll 滚动事件获取滚动的Y值，
// 然后与主题中的Y值进行对比
// [0,7000,8000,9000]
// postionY 在0 和 7000 之间， index = 0
// postionY 在=7000 和 8000 之间， index = 1
// postionY 在=8000 和 9000 之间， index = 2
// 
// postionY 超过>=9000， index = 3
// 
// 条件一，防止赋值过于频繁
// 条件二，判断区间，在0和length-1之间， 在i=length-1
// (i < (length-1) && currentPos >= iPos && currentPos < this.themeTops[i+1]) || (i === (length-1) && currentPos >= iPos)