Mint-ui框架Index List 的应用，以及高度的适配问题

如何应用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().height
        this.fixBottom = this.playList.length > 0 ? height - 60 : height
      }
    },

解释：

     通过getBoundingClientRect().height获取Index list父级dom的高度，通过判断当前mini播放器是否在展示状态，返回不同的高度值，这样便能确保Index list能滚动到底部，避免内容被漂浮的dom结构覆盖(比如例子中的mini播放器)。