今天回顾QQ音乐作品时,在手机上测试了一下,发现一个bug：rank页面跳转rank-detail时,没有像singer-detail一样整页显示,看起来就像是header和tab把rank -detail遮住了,但PC上chrome的调试工具和微信开发者工具测试均无此问题,于是开始找原因。
以下记录我的思考过程：
- 既然是被其他DOM遮挡了,会不会是z-index优先级的问题,遂检查了排序组件和rank-detail的css代码,并没有相关的z-index,排除
- singer页面跳转没问题,rank却有问题,而他们共有的组合是歌曲列表（music-list）,所以music-list的嫌疑先排除,此外非共用的组件有rank/rank-detail/singer/list-view,因为问题出现在rank到rank-detail的过程中,于是我把rank-detail换成一个空白组件,问题仍复发,最大嫌疑人指向rank组件
- 因为是样式的问题,更大可能是CSS的问题,将rank中的CSS全部注释掉/把rank-detail改回去,测试:跳转后,rank-deatil完整显示
凶手确定为div.rank的overflow:hidden属性,我猜想原因：
rank-detail组件是div.rank的子元素,所以多出的部分会被隐藏,显示出来的效果就是看起来header和tab把rank-detail遮住了,而并不是开始预想的z-index问题
解决方法：将div.rank的overflow:hidden去掉,将scroll组件再往下一个DOM级别引入,overflow:hidden也往下写一个级别,使其和rank-detail的music-list同级,这样就不会被遮住了,移动端测试也正常~
感想：此问题最大的难点是PC和移动端测试结果的差异性,所以不能像常规问题一样直接F12调试,更多的是从逻辑上考虑,层层筛选,解题思路很重要~
附上我的项目地址,供参考：[vue2.X仿QQ音乐]（https://davidlin88.github.io/vue-music/）
如有帮助,请不吝star,谢谢~！