uniapp uview里面的u-navbar结合u-sticky组件的使用

最新推荐文章于 2025-06-23 23:02:57 发布

原创最新推荐文章于 2025-06-23 23:02:57 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文讲述了如何解决在使用UView框架中的u-sticky组件实现导航栏吸顶效果时遇到的问题，通过计算并设置offset-top值，结合系统信息和不同平台的适配，确保吸顶效果的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏自定义加需要吸顶产生的问题

如上图直接使用并不能出现tab栏吸顶效果，那是由于u-sticky组件吸顶时与顶部的距离默认为0

那么做如下处理

<u-sticky :offset-top="navbarHeight()">
				<u-tabs :list="helpTabList" active-color="#D01F25" :current="helpTabCurrent"
					@change="helpChange"></u-tabs>
</u-sticky>

// 参考uview导航栏的高度，用来设定吸顶时与顶部的距离,h5不需要操作
			navbarHeight() {
				let systemInfo = uni.getSystemInfoSync();
				/* (750 / systemInfo.windowWidth) */
				/* 在uview navBar组件中有一个默认高度，当这个默认高度加上状态栏高度后就是吸顶的位置，由于这两者相加是px，所以最后还需要转为rpx */
				let topHeight=0
				// #ifdef APP-PLUS
				topHeight = 44 + systemInfo.statusBarHeight;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				topHeight = height + systemInfo.statusBarHeight
				// #endif
				/* 最后一步将px转为rpx */
				return topHeight * (750 / systemInfo.windowWidth)
			},

经过上述处理就可以出现吸顶效果了