uniApp sticky 吸顶 兼容小程序 h5

使用uView的 sticky 完成在h5端的吸顶效果 页面滚动到一定距离后 元素吸顶 h5吸顶距离为44px。

但是在小程序时 默认的吸顶距离是0px因为我的小程序头部导航栏的高度不固定所以这里需要动态的获取页面的整体 状态栏+导航栏的高度 作为吸顶的距离 ，达到适配多机型的目的。

 需要实现的效果如图 刚好让吸顶的位置 在我自定义的导航头部下方

于是我需要先知道导航栏的高度是多少 (因为我左侧的胶囊是参照右侧的微信自带的胶囊大小来的)

所以我可以使用uni封装好的，能够获取到小程序胶囊 dom参数。

<!-- 吸顶 -->
				<u-sticky :enable="enable" :offset-top="offTop">
					    //需要被吸顶的组件
						<myTabs ref="mytabs" @tabsChange="tabsChange"></myTabs>
				</u-sticky>

mounted() {
        //在mounted中调用是确保元素已被加载
		//#ifdef MP-WEIXIN
        //通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		this.Cap = uni.getMenuButtonBoundingClientRect();
        //我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		let CapHeight = (this.Cap.height + this.Cap.top);
        //由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
        //这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		this.offTop = CapHeight / (uni.upx2px(100) / 100);
        //最后拿到想要的值并传入即可
		console.log(this.offTop, 'offTop') 

		//#endif
	},

这样就实现了适配.