网易云音乐app歌单详情页的交互效果特别好看,h5也要自己实现一下。
实现步骤
- 首先一个背景,背景图高斯模糊,然后加上遮罩
- 然后titlebar上面留出位置
- 下面一个div为了让他自适应高度,我们设置为绝对定位,然后top一个titlebar的高度,bottom为0,这样就占满整个屏幕
- 然后播放全部设为粘性布局
position: sticky;
top: 0;
- 然后他们父盒子元素设置为
overflow-y: scroll;
这样就基本实现了,剩下的就是一些细节问题,大体实现框架思路如此。
滚动
- 非定高
就需要用定位来相对于浏览器视口来进行布局,就需要用决定定位,但是移动端fixed定位经常容易出问题,要慎用,可能会导致ios webview默认拉皮筋效果失效,我们这里使用absolute定位实现,但是这个就要注意他的父元素就不要有用定位的效果。 - 定高
弹窗固定高度,这种就比较好实现,内部标题固定,下部定高然后自己滚动。