vue中实现 楼层效果_vue2怎么实现双楼层

需求简介

楼层效果在购物网站比较常见。

典型的楼层效果，需要照顾两个需求：

1. 就是点击某个楼层，则页面滚动到相对应的位置
2. 页面滚动到某个位置，对应的楼层要有高亮的提示效果

来张图示意一下：

当我点击右侧的楼层按钮: 为你推荐，则页面滚动到“为你推荐”这个位置。

实现难点

这玩意说实话不复杂，直接锚点跳转<a href="#id" ></a>就可以。

但是在 vue 项目中，路由的实现占据了hash，那么再使用锚点跳转，路由也会跟着改变。这显然不是我们想要实现的效果。

另外，页面滚动时，楼层按钮的高亮效果也不那么好实现了。

思路

闭门造车当然行不通，在忙碌了半个多小时以后，我终于把目光转向了 npm.org，想看看有没有前辈们已经铺好路了。

果然，哈哈哈，让我找到了这样一个插件：vue-scrollto

首先安装一下npm install --save vue-scrollto

然后在main.js 中全局引入

const VueScrollTo = require('vue-scrollto')

Vue.use(VueScrollTo)

// You can also pass in the default options
Vue.use(VueScrollTo, {
  container: 'body',   // 滚动元素
  duration: 500,  // 动画时长
  easing: 'ease',  // 动画曲线
  offset: 0,  // 滚动终点距离父元素顶部距离
  force: true,  // 强制立即执行，即便元素是可见的
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false, // x 轴禁止滚动
  y: true
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在页面的楼层按钮上使用

<li
  v-scroll-to="{
    el: '#ID',
    container: '#wraper',
    duration: 50,
    easing: 'linear',
    offset: -10,
  }"
  :class="{'active': activeClass===ID}"
><a>为你推荐</a></li>
1
2
3
4
5
6
7
8
9
10

整个页面布局，参考这里

还有一些其他参数，这里就不介绍了，大家可以去文档里看看。

---

这里画一条分割线，为啥呢？因为上面的代码，我已经实现了需求1，即：点击某个楼层，则页面滚动到相对应的位置。

下面要来实现需求二。

想要在内容滚动的时候，让对应的楼层按钮自动高亮，需要监听父元素滚动的事件，然后判断某个内容是否接近了父元素的顶部，如果接近了，就让对应的楼层按钮高亮。

initEvent() {
  const el = this.$el.querySelector('#wraper') // 父元素，其内部元素滚动
  const h = el.querySelectorAll('h2') // 页面中所有的内容的标题，如上面的为你推荐
  const offettopList = [] // 存储标题距离父元素顶部的位置
  for (const k of h) { // 将所有内容的标题距离其父元素顶部的距离存成一个数组
    offettopList.push(k.offsetTop)
  }
  el.addEventListener('scroll', () => {
    offettopList.forEach((t, i) => {
      if (t - el.scrollTop - 10 < 5) { // 当某个元素距离父元素顶部距离小于 5 时
        this.activeClass = h[i].getAttributes('id') // 切换高亮的楼层按钮
      }
    })
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样，一个完整的楼层效果就实现了

我是暴暴君，希望留下你的点赞，谢谢拉