目录
动态楼层导航
页面布局
数据模型
滚动事件监听
监听窗口滚动楼层导航动态定位
设置楼层导航事件驱动方法
设置楼层向上滚动
设置楼层向下滚动
完整代码
在vue中使用v-for动态渲染楼层和楼层导航,然后使用原生JavaScript实现楼层导航动态更新与楼层滚动定位
1、页面初始化时定位首个楼层
2、页面滚动楼层导航自动定位到相应的楼层并高亮显示
3、鼠标点击楼层导航时,当前楼层导航高亮显示,并且页面自动滚动到相应的楼层
滚动楼层导航定位示例地址
{{ item.name }}
export default {
name: 'IFloor',
data () {
return {
element: {
nav_item: null,
floor_item: null
},
timer: null,
floorList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' }
]
}
}
}
export default {
mounted () {
this.element = {
nav_item: document.getElementsByClassName('nav-list-item'),
floor_item: document.getElementsByClassName('floor-item')
}
this.element.nav_item[0].classList.add('active')
window.addEventListener('scroll', this.floorSrcollEventListener)
},
beforeDestroy () {
window.removeEventListener('scroll', this.floorSrcollEventListener)
},
}
export default {
methods: {
/**
* 监听窗口滚动楼层导航动态定位
*/
floorSrcollEventListener () {
const { nav_item, floor_item } = this.element
const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0, len = floor_item.length; i < len; i++) {
let floor_offsetTop = floor_item[i].offsetTop - floor_item[0].offsetTop
if (window_scrollTop >= floor_offsetTop) {
for (let n = 0, len = nav_item.length; n < len; n++) {
const current_classList = nav_item[n].classList
i === n
? current_classList.add('active')
: current_classList.remove('active')
}
}
}
}
}
}
export default {
methods: {
/**
* 设置楼层导航事件驱动方法
* @param {Number} index 楼层下标
*/
setFloorNavMountClick (index) {
const { floor_item } = this.element
const floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
timer = {
step: 60,
times: 16,
FLOOR_OFFSETTOP: floor_offsetTop,
}
if (window_scrollTop > floor_offsetTop) {
this.setFloorScrollArrowUp(timer)
} else if (window_scrollTop == floor_offsetTop) {
return false
} else {
this.setFloorScrollArrowDown(timer)
}
}
}
}
export default {
methods: {
/**
* 设置楼层向上滚动
* @param {Object} timer 定时器配置
*/
setFloorScrollArrowUp (timer) {
clearInterval(this.timer)
this.timer = setInterval(() => {
let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
document.body.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(this.timer)
} else {
document.documentElement.scrollTop = window_scrollTop - timer.step
document.body.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
}
}
}
export default {
methods: {
/**
* 设置楼层向下滚动
* @param {Object} timer 定时器配置
*/
setFloorScrollArrowDown (timer) {
clearInterval(this.timer)
this.timer = setInterval(() => {
let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
document.body.scrollTop = timer.FLOOR_OFFSETTOP
clearInterval(this.timer)
} else {
document.documentElement.scrollTop = window_scrollTop + timer.step
document.body.scrollTop = window_scrollTop - timer.step
}
}, timer.times)
}
}
}
{{ item.name }}