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