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

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

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

首先来看效果图 

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

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

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

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

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

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

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


			
				
					
				
			

那我们就知道了 他有一个 定位的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总会遇到很多兼容性问题，用于记录成长。