移动端列表表头fix布局的改进

以前在做PC端开发的时候，经常会使用position: fix来做一些固定于窗口位置的一些页面功能，比如全局居中的提示框和模态框，或者是页头页脚等等~但是在移动端做的时候长了就会发现，我们要在一些场合避免使用fix布局，就目前来看，主要有以下两个原因：

1. 公司项目曾经使用h5套壳app，在ios上发现，如果列表页中使用fix固表头，那么有有一定几率会造成页面元素 无法点击甚至卡死的现象
2. iphone6的微信中，表头使用fix布局后在滑动列表的过程中点击表头，很大概率会造成表头消失（移动到其他位置）， 但是下拉或者刷新页面重新渲染页面后就会复位的现象

这个时候，我们就要祭出我们的神器，使用flex布局来代替原来的fix布局，整个过程的核心思路为：

1. 将表头和列表视作两大部分，它们的父元素设置display: flex，总高度为视口高度100vh， 并且设置布局方向为垂直flex-direction: column, 子元素不伸缩 flex-shrink: 0
2. 将表头固定高度
3. 列表主题部分设置撑开父元素高度除了表头固定高度的剩余全部高度，然后内部滚动overflow: auto, 别忘记设置IOS上流畅滑动属性-webkit-overflow-scrolling: touch

done~

源码如下：

.container {
  height 100vh
  display flex
  flex-direction column
  flex-shrink 0
  .list-header {
    height 88px
  }
  .list-body {
    flex 1
    overflow auto
    -webkit-overflow-scrolling touch

  }
}