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>