乙個vue滾動tab跟隨切換的例子

2021-09-14 07:11:57 字數 562 閱讀 9710

分享乙個我前幾天做的移動端 tab滾動跟隨的例子

隨著滾動條的滾動,tab會對應進行切換

首先我們需要監聽當前頁面的滾動

mounted(),

destroyed(),

我們的tab列表可以在data裡面進行自定義陣列:

tablist:[,,,,],
然後我們在dom裡面對應渲染tab列表和對應內容,內容可以直接關聯到tablist的item中的乙個字段,也可以分開寫

}

11111111

22222

33333

44444

555555

然後就是我們的js部分了

handlescroll()

}else}},

然後就成功完成了我們的效果!!!

滾動切換tab樣式的效果實現

效果大致描述 滑鼠滾動或者點選指定的tab時,相應的tab標籤樣式改變,另外四個樣式恢復預設,同時相應的內容顯示到可視區域。思路 獲取頁面或者層的滾動高度,以及頁面內容每一部分的高度,當滾動時用js判斷高度之間的關係,從而為指定tab賦予樣式。而點選的效果可以用 使用標籤來做tab,頁面每部分用指定...

vue中寫乙個文字滾動小功能

專案中要用到文字滾動,就寫了乙個 lefttopbox demo nwwest roll id nwwest roll roll ul class roll ul v for item,index in vallist ref rollul class key index name span li ...

賬戶在乙個視窗下多tab頁切換商戶問題

背景 乙個賬號下有多個商戶,且登入狀態後端儲存,當前賬號資訊存在localstorage中 第乙個想法 乙個事件storge當localstorage裡的值發生變化時觸發,可以不在當前頁面觸發 window.addeventlistener storage e 在谷歌瀏覽器是沒有問題的,然而奇葩的i...