uniApp 适配问题 自定义头部导航栏/吸顶距离适配

//获取微信小程序胶囊位置和参数
V_Proto.$getCap = function(){
	//#ifdef MP-WEIXIN
	//只有在微信小程序才执行
	let cap = uni.getMenuButtonBoundingClientRect(); 
	return cap
},

uniApp提供了可以获取微信小程序胶囊位置的api 直接调用得到各种胶囊位置的信息

首先来看效果图 

 左侧的胶囊 是我自定义的内容 ，他的位置是被整体的BOX 加了一个padding-top 挤下来的 这个 padding-top的值 就是胶囊的 top值  看代码 ->

	<!-- 左侧胶囊 padding需要适配顶部栏距离-->
                   <!--注意此处paddingTop是为了让左侧自定义胶囊和右侧胶囊对齐-->
				<view :style="{paddingTop:Cap.top+'px'}" class="bg-image-box">
					<!-- #ifdef H5 -->
					<u-navbar :is-fixed="true" :is-back="true" :title-bold="true" back-icon-color="#000"
						title-color="#000" :border-bottom="PageInfo.border" :background="PageInfo.myBgColor"
						title="商品详情"> </u-navbar>
					<!-- #endif -->
					<!-- 左侧返回按钮和回到首页 -->
					<!-- #ifdef MP-WEIXIN -->
						<!-- 这里是状态栏 状态栏的高度为胶囊的top值 因为要实现滚动到一定位置 状态栏部分的背景颜色变白 而不是透明 --> 
						<view :style="{backgroundColor:`rgba(255,255,255,${opcity==1?'1':'0'})`,height:Cap.top+'px'}" class="status_bar"></view>
						<!-- 自定义左侧胶囊 -->
						<view class="left-icon-box"
							:style="{backgroundColor:`rgba(255,255,255,${opcity==1?'1':'0'})`,paddingBottom:'10px'}">
							<view class="_flex-align-center _flex-top"
								:style="{width:Cap.width+'px',height:Cap.height+'px',border:`1px solid ${opcity==1?'#999999':'#DDDDDD'}`,background:'rgba(255,255,255,1)'}">
								<view class=" icon-left-back" @click="jumpBack('back')">
									<image class="imageWh" src="../../static/Details/ICON/back.png"></image>
								</view>
								<view class="main-line-icon"></view>
								<view @click="jumpBack('home')" class="icon-right-home">
									<image class=" imageWh" src="../../static/Details/ICON/home.png">
									</image>
								</view>
							</view>
						</view>
					<!-- #endif -->

然后滚动到一定位置后 ，我的业务是让状态栏包括自定义胶囊的背景色都变成白色 所以根据滚动监听，到一定的位置 就改变值 实现 看效果图  - >

 这样其实上半部分的功能就实现了，但是新问题又来了 

我需要一个锚点位移的导航栏  购买须知 和 商家信息 

于是我使用了uView 组件 但是发现他的定位距离 默认是 0 就到最顶部去了 覆盖住了我原来的内容

于是我发现 u-sitcky组件  有一个  offset-top值 官方文档是这么写的 

offset-top	吸顶时与顶部的距离，单位rpx	String | Number

<!-- 引入自定义tabs组件 -->
			<u-sticky :offset-top="offTop">
				<view class="top-header-tabs">
					<myTabs @tabsChange="tabsChange"></myTabs>
				</view>
			</u-sticky>

那我们就知道了 他有一个 定位的top值  并且我在F12控制台主动去修改他 发现 他的位置刚好是 

状态栏高度 +  胶囊高度  = 我们需要的吸顶距离  

于是我就将offTop值 动态改好 。

但是发现 我们改好的值获取的单位是px  实际他需要的是rpx  

有两种办法 1是改组件的源码 将这边的值改为px   

我使用的是第二种 直接用得到的px值 * 2   大概和小程序官方文档描述的差距不大 

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

差不多都是 1px : 2rpx 的比例   然后我手动测试了各种机型 发现都没啥大问题 


于是我直接*2 就转换了一下 实现了！
 

 后续效果图

 

 

开发小程序和h5总会遇到很多兼容性问题，用于记录成长。