小程序随滚动条动态修改状态栏颜色

最新推荐文章于 2024-02-19 11:04:15 发布

原创最新推荐文章于 2024-02-19 11:04:15 发布 · 616 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #uni-app

该代码片段描述了一个基于滚动事件的JavaScript函数，当页面滚动时，它会动态调整导航栏的颜色，使其在滚动到一定位置时从白色变为黑色，利用了CSS3的透明度和渐变效果。

onPageScroll((e) => {
  // e.scrollTop基数为120,-30表示到30开始变色,/70表示到100比例就达到1.0。((100-30)/70)
  let scale = (e.scrollTop - 30) / 70;
  // let num = parseInt(255 - scale * 255 + "");
  // num = num > 255 ? 255 : num;
  // 背景透明度：0-100
  alpha.value = scale > 1 ? 1 : scale;

  if (scale < 1) {
    color.value = "#ffffff";
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#ffffff"
    });
  } else {
    color.value = "#000000";
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#ffffff"
    });
  }
});