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

试了下,,,mu模拟器、安卓手机、iOS手机,基本兼容,,滑动也不卡顿。

第三方插件地址


详述App端的2种方案

  1. 使用nvue页面

app-nvue页面渲染在原生引擎下,支持sticky,不存在浏览器兼容问题,可直接使用。

本示例就是基于nvue的示例,全端可实现粘性布局。

对一个列表头设置position: sticky,并且设置距离顶部多少开始吸顶,即同时设置top值,即可实现滚动到距离顶部多少时,固定位置不再滚动。

  1. 使用x5内核渲染vue页面
    app-vue是渲染在webview下的。默认使用系统webview渲染,在低端Android手机上,不支持position: sticky。

如果你的App要在Android 4.4、5.x上正常运行,则需要引入腾讯的x5浏览器内核来替代系统webview渲染vue页面


代码如下:








你可能感兴趣的:(uni-app)