这个标题其实不怎么恰当，这个菜单的实现方式和vue关系不大，但是因为目前项目用的vue，所以就直接看看在vue项目里面怎么去实现。
[假装这里有图]
效果图就不贴了，场景比较多，例如点餐的app，左侧分类热菜，凉菜，饮品...右侧菜单，当页面滚动左侧菜单跟着高亮，点击菜单也会定位右侧的内容
梳理实现思路：
1、首先获取所有的内容和菜单
2、渲染内容和菜单
3、获取每一个模块的渲染高度，从而计算菜单对应的高度，存起来
4、监听页面的滚动，判断当前滚动的距离高亮右侧菜单
5、点击右侧菜单，获取它对应的高度，滚动
我们假设获取的数据结构如下:
[{
"menuName" : "菜单一",
"list": [{
"name": "测试一",
"desc": "描述内容描述内容描述内容描述内容描述内容"
}]
}, {
"menuName" : "菜单二",
"list": [{
"name": "测试二",
"desc": "描述内容描述内容描述内容描述内容描述内容"
}]
}]
上代码：
1、首先获取所有的内容和菜单
data () {
return {
list: []
}
},
created () {
this.getList().then(() => {
// 这里是调用第3步
this.getRenderHeight()
// 这里是调用第4步
window.addEventListener('scroll', debounce(this.scrollCallback, 100, { 'maxWait': 500 }), false)
})
},
methods: {
getList () {
// 这里请求接口，假设data为返回的上面的数据
this.list = data
}
}
2、渲染内容和菜单
<template lang='png'>
.wrap
.left
//- 每个菜单对应的一个模块
.module(v-for='(item, index) in list' :key='index' ref='area')
//- 分类标题
h3 {{item.menuName}}
ul
//- 每一个小卡片的内容
li(v-for='(card, i) in item' :key='i')
span {{card.name}}
span {{card.desc}}
.right
ul
li(
v-for='(item, index) in list'
ref='menuItem'
:class='{current: currentIndex === index}'
:key='index'
@click='scrollTo(index)'
) {{item.menuName}}
</template>
3、获取每一个模块的渲染高度，从而计算菜单对应的高度，存起来
data () {
return {
moduleHeights: [],
currentIndex: 0 // 当前滚动到第几个位置
}
},
mounted () {
this.getModuleHeight()
},
methods: {
getModuleHeight () {
this.$nextTick(() => {
this.moduleHeights = []
let areas = this.$refs.area
for (let i = 0; i < areas.length; i++) {
let sum = 0
for (let j = i - 1; j >= 0; j--) {
sum += areas[j].offsetHeight
}
this.moduleHeights.push(sum)
}
})
}
}
到这里我们准备的数据已经好了！
4、监听页面的滚动，判断当前滚动的距离高亮右侧菜单
// 监听的调用在上面的created函数里面获取数据之后的then方法里面（注意需要节流）
scrollCallback () {
let scrollheight = document.body.scrollTop === 0 ? document.documentElement.scrollTop : document.body.scrollTop
for (let i = 0; i < this.moduleHeights.length; i++) {
if (this.moduleHeights[i] >= scrollheight) {
this.currentIndex = i - 1 > 0 ? (i - 1) : 0
break
}
}
}
5、点击右侧菜单，获取它对应的高度，滚动
methods: {
scrollTo (index) {
window.scrollTo(0, this.moduleHeights[index])
}
}
到这里我们的功能就实现了呢，去项目里面试试吧！当然上面的节流用到的是lodash的debounce函数，如果你不想引用插件也可以自己实现一个简单的节流函数
// 通过节流的方式减少请求
throttle (func, wait, mustRun) {
let timeout
let startTime = new Date()
return () => {
let args = arguments
let curTime = new Date()
clearTimeout(timeout)
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime >= mustRun) {
func.apply(this, args)
startTime = curTime
// 没达到触发间隔，重新设定定时器
} else {
timeout = setTimeout(func, wait)
}
}
}
好了，到这里我们就实现了这个效果。如果各位看官有更好的实现思路欢迎评论哦
网友评论