uni-app 实现置顶悬浮框功能

出门莫恨无人随，书中车马多如簇。这篇文章主要讲述uni-app 实现置顶悬浮框功能相关的知识，希望能为你提供帮助。
试了下，，，mu模拟器、安卓手机、ios手机，基本兼容，，滑动也不卡顿。
第三方插件地址

详述App端的2种方案

使用nvue页面

app-nvue页面渲染在原生引擎下，支持sticky，不存在浏览器兼容问题，可直接使用。
【uni-app 实现置顶悬浮框功能】本示例就是基于nvue的示例，全端可实现粘性布局。
对一个列表头设置position: sticky，并且设置距离顶部多少开始吸顶，即同时设置top值，即可实现滚动到距离顶部多少时，固定位置不再滚动。

使用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=https://www.songbingjia.com/android/" /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>