uniapp吸顶怎么判断导航栏

现在大家的手机各式各样，这么一说，对开发人员也是一个问题，既要兼容这个手机，既要兼容那个手机。那么我们在开发APP的时候，怎么做到让每个手机都兼容呢？

1.我们先把原有的头部导航栏给干掉

{
		    "path" : "pages/mine/mine",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "是的犯得上广泛但是",
				"navigationBarTextStyle": "black",
		        "enablePullDownRefresh": false,
				"navigationStyle":"custom",
				"app-plus": {
					"titleNView": false
				}
		    }
		}

 点击pages.json里面，在想要进行吸顶的页面的style里面加上"app-plus":{"titleNView":false}使官方提供的头部导航栏清除

2.我们每个人手机的状态栏都不一样，那后续该咋弄呢？那就是获取手机型号，进而获取状态栏。从而进行下一步代码的开发

官方在这里给我们提供了一种api。大家可以自行去官网进行查看方法以及属性。后面有相应的代码 (官网：https://uniapp.dcloud.net.cn/api/system/info.html)

 这个时候你就可以看到手机相对应的型号以及获取到的状态栏

3.然后我们定义一个变量，进行赋值进而拿到吸顶的距离

代码：

data(){
    return{
        statuBarHeight:0
    }
}

自定义一个变量来接收获取过来的top栏的高度

4.拿到之后我们就可以进行三元表达式进行判断

代码：

<view class="card" :class="[isFixedTop?'asdf':'']" :style="{top:(isFixedTop?statusBarHeight:0)+'px'}" >

 如果触发吸顶效果了，那我们就用定位

.asdf{
    position:fixed;
    left:0rpx;
    right:0rpx;
    background-color:#FFFFFF;
}

 以上就是一个吸顶遇到导航栏的问题

若你吸顶吸顶还没有写，下面代码是吸顶的方法

<view class="card" :class="[isFixedTop?'asdf':'']" >
				<view>我能接</view>
				<view>本地兼职</view>
				<view>平面设计</view>
				<view>视频剪辑</view>
				<view>线上精选</view>
				<view>信息标注</view>
				<view>文字编辑</view>
				<view class="option_icon">
						<image src="../../img/tyd/Slice 155@2x.png" class="option_icon-img"></image>
				</view>
</view>

这是页面代码

	let self = this;
			const query = uni.createSelectorQuery()
			query.select('.card').boundingClientRect()
			query.selectViewport().scrollOffset()
			query.exec(function(res){
				// console.log('[2131423]',res)
			  self.Topdistance=res[0].top
			  
			})
		},
		//监测页面滑动
		onPageScroll(e) {
			// console.log('[页面滚动]',e)
		  if(e.scrollTop > this.Topdistance){
		    this.isFixedTop = true
		  }else{
		    this.isFixedTop = false
		  }
		}

这是方法代码