微信小程序自定义导航栏机型适配以及屏幕上滑导航栏背景渐变

适配不同机型自定义导航高度定位问题，以及屏幕上滑导航栏背景颜色实现渐变

<view class="navbarbox" style="background-color: {{navBarBackground}}; height: {{height}}rpx;">
  <view class="navBar" style="  position: fixed; top: {{top}}rpx;">
    内容
  </view>
</view>

.navbarbox{
  width: 750rpx;
  position: fixed;
  z-index: 999;
}
.navBar {
  left: 20rpx;
  z-index: 999;
  color: #fff;
}

data: {
navBarBackground: 'transparent',
    top: 50,
    height: 187,
  },
onPageScroll: function (e) {
    // 获取页面滑动距离
    const scrollTop = e.scrollTop;

    // 根据滑动距离修改导航栏样式
    if (scrollTop > 0) {
      // 当滑动距离超过100时，改变导航栏背景色为白色
      this.setData({
        navBarBackground: 'rgba(0,0,0,.3)'
      });
    } else {
      // 否则保持导航栏背景色为透明
      this.setData({
        navBarBackground: 'transparent'
      });
    }
  },
onLoad: function () {
    //获取屏幕宽度
    const screenWidth = wx.getSystemInfoSync().screenWidth;

    // 获取导航栏胶囊按钮信息
    const menuButtonRect = wx.getMenuButtonBoundingClientRect();
    console.log('导航栏胶囊按钮信息：', menuButtonRect);

    // 获取导航栏胶囊按钮的高度
    const menuButtonTop = menuButtonRect.top;
    const menuButtonHeight = menuButtonRect.height;
    console.log('导航栏胶囊按钮的高度：', menuButtonHeight);
    this.setData({
      top: menuButtonTop * (750 / screenWidth) + 10,
      height: menuButtonTop * (750 / screenWidth) + menuButtonHeight * (750 / screenWidth) + 10
    })
  },