导航栏悬浮遇到的问题怎么办？与px官方文档的解释

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

导航栏悬浮遇到的问题怎么办？与px官方文档的解释

rpx（像素）：可以根据屏幕宽度进行自适应。 将屏幕宽度指定为 。 如上，屏幕宽度为375px端微信小程序开发，总共有750个物理像素，那么=375px=750个物理像素，1rpx=0.5px=1个物理像素。

我给大家举个例子，方便大家理解：

我定制的导航栏高度是64rpx。 我现在在导航栏下方有一个导航栏。 我希望当我向上滑动时，下面的导航栏能够吸附在顶部导航栏的下方。 可能有点抽象。 请看下面两张图片

*终效果图：

现在你应该对这个问题有了一个大概的了解，但是如何实现呢？

顶部导航栏的高度为64rpx。 如果是的话导航栏悬浮遇到的问题怎么办？与px官方文档的解释，我们只需在滚动过程中超过一定限制时，将下导航栏的top值设置为64rpx即可。 但如果是手机甚至其他类型的手机呢？

请看代码：

 changeHeight(){
    wx.getSystemInfo({ //首先获取当前机型的宽度
      success: function (res) {//在利用宽度/750，保留两位小数
        //从而计算出当前机型1rpx代表多少px,例如iphone5,1rpx=0.42px
        phoneHeight = Math.floor(res.screenWidth / 750 * 100) / 100
      }
    })
    var query = wx.createSelectorQuery();
    query.select('.topNav').boundingClientRect((rect)=> {
      // console.log(rect)
      this.setData({//height=64,不同机型，需要使用下方的公式
        height: rect.height*(1/phoneHeight) + 'rpx'
      })
    }).exec();
  },

大众和大众

这两个单元是css3中的新单元

vh 代表窗口的高度。 100vh可以理解为将窗口分为100份，1份=1vh

vw 表示窗口的宽度。 100vw可以理解为将窗口分为100份，1份=1vw

在开发过程中，这两个单位很少用到，小程序

这是我在做导航栏悬浮时遇到的问题。 如果以后有时间，我会写一篇关于导航栏悬浮的详细博文。 如果这篇文章有什么不明白的地方，可以留言告诉我，我会补充的。 让博客文章更加详细

如果有不知道怎么做或者有疑问的同学，请在下面留言。 我很乐意回答您的问题。

如果您无法及时解答，也可以选择加入前端开发交流群提问~~

群号：（前端开发交流群）

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等