uniapp 吸顶导航栏适配

1、uniapp 使用了原生导航栏

5654

<style lang="scss">
    .topNav{
        // 非H5
        // #ifndef H5
        position: fixed;
        top: 0;
        // #endif
        
        // 是H5
        // #ifdef H5
        position: sticky;
        top: 44px;
        // #endif
    }
    
</style>

2、uniapp 使用了自定义导航栏

<template>
    <!-- 自定义导航栏 -->
    <up-navbar placeholder title="我的优惠券" :autoBack="true"> </up-navbar>
    <view class="topNav all-row" :style="{ top: `${top}px` }"></view>
</template>
​
<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      top: 0,
​
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getWindowInfo().statusBarHeight;
    // 44是导航栏的高度
    this.top = this.statusBarHeight + 44;
  }
};
</script>
​
<style lang="scss">
.topNav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
}
</style>

position: fixed; / position: sticky; 都可以，fixed 不占位 sticky占位