? ?第一步 app.js onload中加入
//获取系统信息
????wx.getSystemInfo({
??????success:?res?=>?{
????????this.system?=?res
??????}
????})
????//获取胶囊信息
????this.menu?=?wx.getMenuButtonBoundingClientRect()
????//打印数据
????console.log('系统信息',?this.system)
????console.log('胶囊信息',?this.menu)
------------------------------------------------------------------------------------
?globalData:?{
????//?头部的自定义的高度
????statusBarHeight:?wx.getSystemInfoSync()['statusBarHeight']
??}
第二步，需要使用的页面
使用页面js
??/*?自定义头部data部分?*/
????statusBarHeight:0,
????navheight:0,
????pagetop:0,
????scrollTop:0,
????numop:0,
使用页面json
"navigationStyle":?"custom",
使用页面wxml
<view>
??<view?class="mytop?{{scrollTop?>?10???'navstyl':'unnavstyl'}}">
????<view?style="height:{{statusBarHeight}};"></view>
????<view?style="display:?flex;line-height:?44px;">
??????<view?class="my{{scrollTop?>?10???'my':'me'}}">个人中心</view>
????</view>
??</view>
</view>
使用页面wxss
/*?上滑显示，下滑隐藏?*/
.my{
??position:?fixed;
??top:?0;
??right:?0;
??width:?750rpx;
??z-index:?9999;
}
.navstyl{
??background:?#ffffff;
??transition:?all?1.5s;
}
.unnavstyl{
??transition:?all?1.5s;
}
.my{
??transition:?all?1.5s;
??opacity:?1;
??text-align:?center;
??flex:?1;
??font-size:?32rpx;
??font-weight:?bold;
}
.me{
??transition:?all?1.5s;
??opacity:?0;? //控制自定义文字显示
??text-align:?center;
??flex:?1;
??color:?#fff;
}
/*?上滑显示，下滑隐藏END?*/
扫码体验效果
?