uniapp自定义导航栏背景色淡入淡出效果

首先当前页面的导航栏必须是自定义的,实现代码如下

// 页面滚动
onPageScroll(e => {
//定义一个最大值(根据页面情况滚动的情况,别页面滚动的最大距离不到200,你定义一个200,那肯定是效果不好的)
  let max = 200 
  let opacity = Number(e.scrollTop / max).toFixed(2)
  if (e.scrollTop === 0) {
    opacity = 0
  } else if (e.scrollTop > max) {
    opacity = 1
  }
  // 这是 _this.bgc是我自己定义的变量,到时候切换成你得变量
  // 然后把这个变量写到你自定义导航栏那里
  _this.bgc = `rgba(255,255,255,${opacity})`
})

如果自定义导航栏组件不会写,就去找ui库,现在各种小程序ui都会有自定义导航栏组件的,直接组件拿来用就行

重点! 这种不推荐你使用uniapp官方的那个自定义的导航栏,因为会出现这种情况, 我css深度选择器选了半天也没处理掉(也可能是我太菜了),就是标题栏有两层背景 颜色,导致了标题栏的颜色和顶部安全区的颜色不一致