專案初戰10之吸頂效果 el

2021-09-29 01:47:36 字數 1660 閱讀 9160

首先要知道滾動到多高時候有吸頂效果,由於以前的那個css屬性已經不能用了,所以可以使用offset屬性,所以現在就再mounte(元件掛載完成後的方法)由於元件是沒有offset屬性的,所以就要去到這個元件的template裡面獲取它offset屬性,這個時候就可以使用**$el**

獲取元件裡的元素

但是mounte只是元件掛載後的方法,不代表全都載入完,所以高度還是不準確的

所以就需要監聽到這個tab上面的載入完後,計算出offsettop的值,

所以再獲取輪播圖來展示的元件那裡,設定乙個事件,然後再發出乙個事件,讓首頁獲取,然後獲取offsettop接可以了,然後由於不需要等到獲取所有只需要獲取到一張就可以獲取到完整的高度,所以只需要設定乙個開關來設定以下,如下

for=

"item in banners"

>

"item.link"

>

"item.image" alt=

"" @load=

"loadimageitem"

>

<

/a>

<

/swiper-item>

<

/swiper>

<

/template>

import

from

'components/common/swiper'

export

default},

props:}}

, components:

, methods:}}

}<

/script>

獲取到了完整高度,然後可以這個tab進行固定,就滾動到tab位置的時候,繫結乙個class,這個class的樣式,設定定位flexed,最後發現還是不行,因為上面還有乙個首頁的頂部的東西,tab會被頂上去消失掉,那麼怎麼才能實現想要的效果呢

可以這樣,曾加乙個tab,用來進行設定fixed,一開始隱藏,滾動到同部分時再顯示,具體操作

首先由於滾動的是中間內容區域,所以最上面的首頁兩個字的標題的fixed的樣式可以刪除掉,然後給新曾增加的tab乙個樣式

相對定位,這樣子就可以實現

最後設定一下,先讓他隱藏,然後再滾動到一定區域後顯示,就可以實現這個功能了

最後會發現乙個bug,就是上面的tab跟下面的tab不同步,就是類似上面的是 流行,下面的是精選

方法:我們給兩個tab的ref設定不同的值,然後拿到下圖中currentindex來控制兩個tab的值同步

再獲取不同資料的時候那裡

設定值同步

python爬蟲初戰之小說爬取

廢話不多說,上 總體思路是構建函式然後迴圈。函式分兩塊,第乙個函式得到標題和每一章節的 第二個函式得到每一章節的具體內容,然後迴圈就ok。import urllib.request as req import re 開啟頁面,找到正文 url name 流星蝴蝶劍 defget url title ...

如何在Vue專案中實現吸頂元素

我的思路就是判斷合適的時候將這個元素的position設為fixed,那麼這個合適的時機如何判斷呢?我們可以計算頁面滾動的距離。在mounted鉤子中加入以下 mounted 離開頁面時要移除監聽,在destroyed鉤子中移除監聽 destroyed 監聽dom渲染完成 this.nexttick...

微信吸粉技巧之 微社群

做自 最為失敗的是沒有死忠的粉絲,我發現我是失敗者中的一員,好不容易有機會去南韓,看看外面的世界,讓自己 漲點姿勢 可一回來,發現空間日誌,瀏覽量低的嚇人。頓時,感覺人生不會再愛了 因為,你們這些人,都只會從我身上吸收有此許價值的東西,可是呢,作為雙面性格的我來說,又回頭反省自己,可能我這人吧,心真...