如何應(yīng)用mint-ui框架的Index List實(shí)現(xiàn)滾動(dòng)列表及索引導(dǎo)航功能？Index List的高度如何適配？以下是本人開發(fā)中一些經(jīng)驗(yàn)的記錄。

Index List（紅色區(qū)域）。

?vue dom結(jié)構(gòu)：

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

問題描述：

? ? 當(dāng)視圖中存在著播放歌曲（需要漂浮著一個(gè)mini播放器），mini播放器的dom結(jié)構(gòu)會(huì)擋住一部分的Index list內(nèi)容，此時(shí)，我們需要重新設(shè)置Index List的高度，否則列表會(huì)滾動(dòng)不動(dòng)底部（一部分會(huì)被mini播放器覆蓋）。

解決方法：

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

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

解釋：

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

總結(jié)

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

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