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

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

详述App端的2种方案

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





    推荐阅读