微信小程序设置navigationStyle:custom后如何获得右侧胶囊位置?,自定义菜单的时候就可以保持与胶囊菜单位置一直了,请问怎么计算出来,有没有原生的api提供
网友回复
有接口可以实现
1、首先在要自定义的页面中的pageName.json中加上,"navigationStyle": "custom" 隐藏微信小程序原生导航栏。 2、调用微信api获取手机系统屏幕高度和导航栏高度
getTopHeight:function(){ //获取胶囊位置信息 let menuButtonObject = wx.getMenuButtonBoundingClientRect(); //定义导航位置参数 var globalData={ navHeight:0, navTop:0, windowHeight:0, ww:0, hh:0, } var navTop; var navHeight; //获取手机系统信息 wx.getSystemInfo({ success: res => { //导航高度 var statusBarHeight = res.statusBarHeight; navTop = menuButtonObject.top; navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; globalData.navHeight = navHeight; globalData.navTop = navTop; globalData.windowHeight = res.windowHeight; //可视窗口宽度 var ww = res.windowWidth; //可视窗口高度 var hh = res.windowHeight; globalData.ww = ww; globalData.hh = hh; console.log(globalData) //这是我自定义的返回图标位置高度 21单位是 rpx,是图标高度的一半,图标高度为48rpx var backHeight=(navTop*2+(navHeight-navTop))-21; that.setData({ globalData:globalData, backHeight:backHeight }) }, fail(err) { console.log(err); } }) }3、这里是wxml中的内容
<view class="bg-img"> <image src="img/bgImg.png" class='img'></image> </view> <image src="img/back.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image> <!-- 自定义导航 高度单位 rpx ,这里+4 是因为样式美观,你喜欢加多少都行,hidden这个参数在下面的方法中获取--> <view class="top-view" style="height:{{(globalData.navHeight*2)+4}}rpx" hidden="{{hidden}}"> <image src="img/back-black.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image> </view>4、监听页面滑动高度
/** * 监听页面滑动事件 * @param {} e */ onPageScroll:function(e){ //e.srolltop 是页面滑动的实时高度 console.log(e.scrollTop) var that=this; //这里390是我顶部导航栏背景图片的高度 height 则是计算出来背景图片隐藏的高度 var height=(390-(that.data.globalData.navHeight*2)+4)/2; console.log(height) if(parseInt(e.scrollTop)>height){ that.setData({ hidden:false }) }else{ that.setData({ hidden:true }) } },