試了下实夹，拣播，，mu模擬器收擦、安卓手機贮配、iOS手機，基本兼容塞赂，泪勒，滑動也不卡頓。
詳述App端的2種方案
- 使用nvue頁面
app-nvue頁面渲染在原生引擎下，支持sticky圆存，不存在瀏覽器兼容問題叼旋，可直接使用。
本示例就是基于nvue的示例沦辙，全端可實現(xiàn)粘性布局夫植。
對一個列表頭設置position: sticky，并且設置距離頂部多少開始吸頂油讯，即同時設置top值详民，即可實現(xiàn)滾動到距離頂部多少時，固定位置不再滾動陌兑。
- 使用x5內(nèi)核渲染vue頁面
app-vue是渲染在webview下的沈跨。默認使用系統(tǒng)webview渲染，在低端Android手機上兔综，不支持position: sticky饿凛。
如果你的App要在Android 4.4、5.x上正常運行软驰，則需要引入騰訊的x5瀏覽器內(nèi)核來替代系統(tǒng)webview渲染vue頁面
代碼如下：
<template>
<view class="full">
<view class="full">
<image src="/static/shuijiao.jpg" style="width: 750upx;height: 200px;"></image><!-- 注意這里圖片的高度涧窒，必須是偶數(shù)。否則在H5端的部分chrome版本上會觸發(fā)chrome的bug锭亏，在標題欄下方會留下一條線的空隙 -->
</view>
<view class="sticky-box">
<view style="width: 250upx;text-align: center;"><text class="textcenter">條件1</text></view>
<view style="width: 250upx;text-align: center;"><text class="textcenter">條件2</text></view>
<view style="width: 250upx;text-align: center;"><text class="textcenter">條件3</text></view>
</view>
<view>
<text style="line-height: 90px;" class="textcenter">
1
2
3
4
5
6
7
8
9
10
</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.full{
width: 750upx;
margin: 0;
padding: 0;
}
.sticky-box {
/* #ifndef APP-PLUS-NVUE */
display: flex;
position: -webkit-sticky;
/* #endif */
position: sticky;
top: var(--window-top);
z-index: 99;
flex-direction: row;
margin: 0px;
padding: 15px 0 15px 0;
background-color: #F4F5F6;
border-bottom-style: solid;
border-bottom-color: #E2E2E2;
}
.textcenter{
text-align: center;
font-size: 18px;
}
</style>
