需求簡(jiǎn)介

樓層效果在購(gòu)物網(wǎng)站比較常見(jiàn)。

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

就是點(diǎn)擊某個(gè)樓層，則頁(yè)面滾動(dòng)到相對(duì)應(yīng)的位置

頁(yè)面滾動(dòng)到某個(gè)位置，對(duì)應(yīng)的樓層要有高亮的提示效果

來(lái)張圖示意一下：

當(dāng)我點(diǎn)擊右側(cè)的樓層按鈕: 為你推薦，則頁(yè)面滾動(dòng)到“為你推薦”這個(gè)位置。

實(shí)現(xiàn)難點(diǎn)

這玩意說(shuō)實(shí)話不復(fù)雜，直接錨點(diǎn)跳轉(zhuǎn)<a href="#id" ></a>就可以。

但是在 vue 項(xiàng)目中，路由的實(shí)現(xiàn)占據(jù)了hash，那么再使用錨點(diǎn)跳轉(zhuǎn)，路由也會(huì)跟著改變。這顯然不是我們想要實(shí)現(xiàn)的效果。

另外，頁(yè)面滾動(dòng)時(shí)，樓層按鈕的高亮效果也不那么好實(shí)現(xiàn)了。

思路

閉門造車當(dāng)然行不通，在忙碌了半個(gè)多小時(shí)以后，我終于把目光轉(zhuǎn)向了 npm.org，想看看有沒(méi)有前輩們已經(jīng)鋪好路了。

果然，哈哈哈，讓我找到了這樣一個(gè)插件：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', // 滾動(dòng)元素duration: 500, // 動(dòng)畫時(shí)長(zhǎng)easing: 'ease', // 動(dòng)畫曲線offset: 0, // 滾動(dòng)終點(diǎn)距離父元素頂部距離force: true, // 強(qiáng)制立即執(zhí)行，即便元素是可見(jiàn)的cancelable: true,onStart: false,onDone: false,onCancel: false,x: false, // x 軸禁止?jié)L動(dòng)y: true })

在頁(yè)面的樓層按鈕上使用

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

整個(gè)頁(yè)面布局，參考這里

還有一些其他參數(shù)，這里就不介紹了，大家可以去文檔里看看。

---

這里畫一條分割線，為啥呢？因?yàn)樯厦娴拇a，我已經(jīng)實(shí)現(xiàn)了需求1，即：點(diǎn)擊某個(gè)樓層，則頁(yè)面滾動(dòng)到相對(duì)應(yīng)的位置。

下面要來(lái)實(shí)現(xiàn)需求二。

想要在內(nèi)容滾動(dòng)的時(shí)候，讓對(duì)應(yīng)的樓層按鈕自動(dòng)高亮，需要監(jiān)聽(tīng)父元素滾動(dòng)的事件，然后判斷某個(gè)內(nèi)容是否接近了父元素的頂部，如果接近了，就讓對(duì)應(yīng)的樓層按鈕高亮。

initEvent() {const el = this.$el.querySelector('#wraper') // 父元素，其內(nèi)部元素滾動(dòng)const h = el.querySelectorAll('h2') // 頁(yè)面中所有的內(nèi)容的標(biāo)題，如上面的為你推薦const offettopList = [] // 存儲(chǔ)標(biāo)題距離父元素頂部的位置for (const k of h) { // 將所有內(nèi)容的標(biāo)題距離其父元素頂部的距離存成一個(gè)數(shù)組offettopList.push(k.offsetTop)}el.addEventListener('scroll', () => {offettopList.forEach((t, i) => {if (t - el.scrollTop - 10 < 5) { // 當(dāng)某個(gè)元素距離父元素頂部距離小于 5 時(shí)this.activeClass = h[i].getAttributes('id') // 切換高亮的樓層按鈕}})}) },

這樣，一個(gè)完整的樓層效果就實(shí)現(xiàn)了

我是暴暴君，希望留下你的點(diǎn)贊，謝謝拉

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。