uniapp小程序顶部导航判断是否滚动显示背景色

1.大概需求

最近遇到一个需求就是小程序如果滑动顶部导航栏背景色就改变颜色，

这种需求现在小程序也很常见，

那么这种怎么去实现呢，方法很简单

使用 "app-plus": { "titleNView": false },

或者使用navigationStyle": "custom" // 使用自定义导航栏，系统会关闭默认的原生导航栏

          style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
            height: 12%;
          "
          :style="{ 'background-color': backColor }"
        >
          <view class="u-nav-slot" slot="left" @click="selectCity">
            <view class="flex curCitycss">
              <view v-if="curCity.length < 1">定位中...</view>
              <viwe v-else>{{ curCity | filterAmount(3) }}</viwe>
              <view>
                <view class="u-nav-left"></view>
              </view>
            </view>
          </view>
        </view>

定义动态的 style 背景色 :style="{ 'background-color': backColor }"

data： { backColor: 'rgba(255, 255, 255, 0)', }

初始颜色为透明色

通过小程序自带的onPageScroll方法监听滚动， 随着滚动的程度去改变颜色变化的颜色的深度

` onPageScroll(res) {

//获取距离顶部距离
const scrollTop = res.scrollTop
if (scrollTop >= 0) {
  // 导航条颜色透明渐变
  if (scrollTop <= 20) {
    this.backColor = 'rgba(255, 255, 255, 0)'
  } else if (20 < scrollTop && scrollTop <= 100) {
    this.backColor = 'rgba(255, 255, 255, .5)'
  } else if (scrollTop > 100) {
    this.backColor = 'rgba(255, 255, 255, 10)'
  }
}

},`

其实很简单，大家有更好的方法欢迎指点哦