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

fineline

于 2023-11-17 10:03:16 发布

阅读量550

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 javascript uni-app

本文链接：https://blog.youkuaiyun.com/ahook/article/details/134456489

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"
    });
  }
});