+
80
-

微信小程序设置navigationStyle:custom后如何获得右侧胶囊位置?

微信小程序设置navigationStyle:custom后如何获得右侧胶囊位置?,自定义菜单的时候就可以保持与胶囊菜单位置一直了,请问怎么计算出来,有没有原生的api提供

网友回复

+
1
-

有接口可以实现

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
      })
    }
  },

我知道答案,我要回答