小程序页面滚动时的自定义导航栏背景颜色变换

有时候我们会遇到这种情况：导航栏的背景颜色为透明色，页面内容直接顶到导航栏上，如下图所示。

当我们滚动页面时，页面内容会一直占着导航栏，看起来很丑，如图：

这时我们可以监听页面滚动，给导航栏设置一个背景颜色，将导航栏处的页面内容遮挡掉，从而改变视觉效果。

wtml文件如下：（这是自定义的导航栏，里面添加了background_color属性来改变导航栏的背景颜色）

<myNavbar  background_color="{{show_white?'#fff':'transparent'}}"></myNavbar>

js文件如下：

  onPageScroll(e){
    if(e.scrollTop>50){ //当页面滚动到某个位置时（这里设置为50），将导航栏背景颜色设置为白色
      this.setData({show_white:true})
    }else{
      this.setData({show_white:false})
    }
   }

效果如图：