vue实现定位菜单

这个标题其实不怎么恰当，这个菜单的实现方式和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、渲染内容和菜单

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)
    }
  }
}

好了，到这里我们就实现了这个效果。如果各位看官有更好的实现思路欢迎评论哦