背景
需要H5实现一下滑动列表，顶部tab栏可以切换，当向下滑动列表的时候tab栏固定到顶部。果断的看了一下官方文档：
就是这个，我一看还有扩展属性，非常友好。向下滑动查看文档
使用sticky实现的。众所周知，在ios上类似固定这种都会有一些问题，比如滑动过程中突然消失不见了。。。（虽然我还没研究为什么会出现这个，记个TODO）
此时，附上我的代码：
<div class="container"><div class="fixed-tabs"><van-tabs @change="changeTab" v-model="active"><van-tab title="进行中"><div class="scrollable-container" v-if="doingOrderList.length !== 0 && state === 0"><van-listv-model="doingOrderLoading":finished="doingOrderFinished"finished-text="没有更多了"@load="onLoadDoingOrderList"><ListContainer:list="doingOrderList"@emitJumpDetail="onJumpDetail"/></van-list></div><div v-else><Empty /></div></van-tab><van-tab title="已结束"><div class="scrollable-container" v-if="finishedOrderList.length !== 0 && state === 1"><van-listv-model="finishOrderLoading":finished="finishOrderFinished"finished-text="没有更多了"@load="onLoadFinishOrderList"><ListContainer:list="finishedOrderList"@emitJumpDetail="onJumpDetail"/></van-list></div><div v-else><Empty /></div></van-tab></van-tabs></div></div>
.fixed-tabs {position: fixed;top: 0;width: 100%;z-index: 999; /* 可根据需要调整 z-index 值 */}
本来以为大功告成，但是突然又发现了一个问题，页面不能滑动了。。。
为什么不能滑动了呢？
回看下我们的样式，tab是包含list的父元素。父元素设置了fixed，所以呀～
因为固定定位的父元素导致了滚动行为的限制。
固定定位的元素会脱离正常文档流，并相对于最近的具有定位（非static）属性的父元素进行定位。这可能会影响到内部元素的滚动行为。
解决办法一：
给包裹Tab组件的固定定位的div元素添加overflow: auto;样式。这样可以为该元素添加滚动条，并使Tab内部的列表可以在滚动时进行滑动。
解决办法二：
给list包裹一层div，并且设置overflow：auto属性。
.scrollable-container {height: calc(100vh - 50px); /* 根据需要调整高度值 */overflow-y: auto;
}
