需求簡介

樓層效果在購物網站比較常見。

典型的樓層效果，需要照顧兩個需求：

就是點擊某個樓層，則頁面滾動到相對應的位置

頁面滾動到某個位置，對應的樓層要有高亮的提示效果

來張圖示意一下：

當我點擊右側的樓層按鈕: 為你推薦，則頁面滾動到“為你推薦”這個位置。

實現難點

這玩意說實話不復雜，直接錨點跳轉<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 })

在頁面的樓層按鈕上使用

<liv-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') // 切換高亮的樓層按鈕}})}) },

這樣，一個完整的樓層效果就實現了

我是暴暴君，希望留下你的點贊，謝謝拉

總結

以上是生活随笔為你收集整理的vue中实现 楼层效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。