vue中实现 楼层效果
需求簡(jiǎn)介
樓層效果在購(gòu)物網(wǎng)站比較常見(jiàn)。
典型的樓層效果,需要照顧兩個(gè)需求:
來(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)題。
- 上一篇: 南充计算机职业学校有哪些专业,南充旅游计
- 下一篇: Vue组件与动画