UNIAPP滚动页面实现导航栏背景色渐变_uniapp页面上下滑动时导航栏背景色渐变显示

前景：uni自带的导航栏有时候并满足不了我们的业务需求，这个时候需要用到自定义导航组件即navbar；

需求：导航栏透明背景，并且当页面滑动的时候，逐渐实现背景颜色为白色

代码：

html代码：给导航栏设置style

:style="{'background-color':`rgba(255,255,255,${opacity})`}"

示例：

<view class="recharge-nav-bar" :style="{'background-color':`rgba(255,255,255,${opacity})`}">
  	<text class="back bg-icon bg-icon-return" @click="goBack"></text>
  	<text class="nav-title">历史记录</text>
</view>

js部分：

data(){
  return {
    opacity: 0,
  }
},
onPageScroll(e) {
  if (e.scrollTop <= 44) {
    this.opacity = e.scrollTop / 44 * 1
  } else if (e.scrollTop > 44) {
    this.opacity = 1
  }
},