uniapp微信小程序自定义导航栏下处理吸顶

uniapp yekong

uniapp 使用uview2.0在u-navbar自定义导航和u-sticky吸顶中间有内容时吸顶处理。
在使用自定义导航栏时,使用吸顶需要考虑导航栏的高度以及状态栏的高度。

uniapp微信小程序自定义导航栏下处理吸顶

<u-navbar ref="navbar" :placeholder="true" left-icon-color="rgba(255, 255, 255, 1)" :safeAreaInsetTop="true"
	title=" " bgColor="rgba(0,0,0,0)">
	<view slot="center">
		<div class="centerLogo">
			<image src="../../static/home/logo.png"></image>
		</div>
	</view>
</u-navbar>
<u-sticky :offset-top="top">
	<div class="tabBody">
		<div class="moshiName">春季模式</div>
		<div class="nav">
			<navItem></navItem>
		</div>
	</div>
</u-sticky>

获取高度

获取自定义导航栏的高度以及状态栏的高度,将两个高度相加赋值给吸顶组件offset-top.

this.top = (parseInt(this.$refs.navbar.height) + uni.getSystemInfoSync().statusBarHeight) + 'px'
喜欢