如何應用mint-ui框架的Index List實現滾動列表及索引導航功能？Index List的高度如何適配？以下是本人開發中一些經驗的記錄。

Index List（紅色區域）。

?vue dom結構：

看了一下Index List的源碼，發現高度默認為window.innerHeight 減去Index List的getBoundingClientRect().top，也就是除了Index List上方的dom高度以外的窗口全部的高度。

問題描述：

? ? 當視圖中存在著播放歌曲（需要漂浮著一個mini播放器），mini播放器的dom結構會擋住一部分的Index list內容，此時，我們需要重新設置Index List的高度，否則列表會滾動不動底部（一部分會被mini播放器覆蓋）。

解決方法：

? ? watch播放列表的變化，如果播放列表為空，則證明mini播放器是隱藏的；如果不為空，則是顯示的，此時需要減去mini播放器的高度，給在dom結構中給mt-index-list添加height屬性，在data中定義fixBottom，默認為零，在watch播放列表變化時改變fixBottom的值即可，原本在computed中計算，但由于數據列表為異步獲取，computed執行時，singer中還沒有渲染，因此會提示getBoundingClientRect()方法undefined，所以改為在watch播放列表時更改fixBottom：

watch: {playList() {const height = document.getElementsByClassName('singer')[0].getBoundingClientRect().heightthis.fixBottom = this.playList.length > 0 ? height - 60 : height}},

解釋：

? ? ?通過getBoundingClientRect().height獲取Index list父級dom的高度，通過判斷當前mini播放器是否在展示狀態，返回不同的高度值，這樣便能確保Index list能滾動到底部，避免內容被漂浮的dom結構覆蓋(比如例子中的mini播放器)。

總結

以上是生活随笔為你收集整理的Mint-ui框架Index List 的应用，以及高度的适配问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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