H5 下拉刷新和上划加载更多的布局技巧

0、前言

做移动端H5项目，碰到需要做下拉刷新及加载更多的场景是很常见的，本文给出一种实现这种需求的较为优雅的布局方式

1、布局

参看这个实例，页面主体部分有三层包裹元素，
第一层起和header同级并占据全部空间作用；
第二层占据第一层剩余部分空间，给其运用transformY属性从而起到可以上划或下拉的作用，可看作是下拉+数据+上划的包裹层；
第三层才是真正的数据包裹层，首先占据第二层所有空间，再给其运用overflow-y:scroll；-webkit-overflow-scrolling:touch;就能使其内部元素实现顺滑滚动效果

2、优缺点

优点：这个布局非常适合普通的流式布局，可以应付实际工作中大部分的需求；
缺点：不适合非流式布局，比如页面主体是瀑布流，原因在于瀑布流一般会用上绝对定位，使得父元素高度不是被子元素撑大的，从而滑动可能出问题。