uni-app 實現置頂懸浮框功能

試了下，，，mu模擬器、安卓手機、iOS手機，基本兼容，，滑動也不卡頓。

第三方插件地址

詳述App端的2種方案

1. 使用nvue頁面

app-nvue頁面渲染在原生引擎下，支持sticky，不存在瀏覽器兼容問題，可直接使用。

本示例就是基於nvue的示例，全端可實現粘性布局。

對一個列表頭設置position: sticky，並且設置距離頂部多少開始吸頂，即同時設置top值，即可實現滾動到距離頂部多少時，固定位置不再滾動。

2. 使用x5內核渲染vue頁面
   app-vue是渲染在webview下的。默認使用系統webview渲染，在低端Android手機上，不支持position: sticky。

如果你的App要在Android 4.4、5.x上正常運行，則需要引入騰訊的x5瀏覽器內核來替代系統webview渲染vue頁面

代碼如下：

<template>
	<view class="full">
		<view class="full">
			<image src="/static/shuijiao.jpg" style="width: 750upx;height: 200px;"></image><!-- 注意這里圖片的高度，必須是偶數。否則在H5端的部分chrome版本上會觸發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>