在UniApp中实现滚动时导航栏渐显固定效果

由于有时候UI出图很丰富,根本没有固定的导航栏,但是又要实现滚动页面有固定导航栏,还是渐渐显示的效果

方案二：使用页面生命周期和onPageScroll 

export default {
  data() {
    return {
      navbarOpacity: 0
    }
  },
  onPageScroll(e) {
    const scrollTop = e.scrollTop;
    this.navbarOpacity = Math.min(scrollTop / 100, 1);
  }
}

之前我还手搓了一个,实现原理是写了2个header,固定的header开始是透明的,根据滚动使opacity为1,背景颜色也通过滚动实现