详情页点击标题,滚动到对应主题
// 防抖
// 提高性能,不做频繁操作
// 详情页点击标题,滚动到对应主题
// $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)