需求简介

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

典型的楼层效果,需要照顾两个需求:

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

在页面的楼层按钮上使用

<li
  v-scroll-to="{
    el: '#ID',
    container: '#wraper',
    duration: 50,
    easing: 'linear',
    offset: -10,
  }"
  :class="{'active': activeClass===ID}"
><a>为你推荐</a></li>

整个页面布局,参考这里

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


这里画一条分割线,为啥呢?因为上面的代码,我已经实现了需求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') // 切换高亮的楼层按钮
      }
    })
  })
},

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

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

Logo

前往低代码交流专区

更多推荐