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

javascript 复制代码
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"
    });
  }
});
相关推荐
进击的尘埃4 分钟前
Vue3 中 emit 能 await 吗?事件机制里的异步陷阱
javascript
青青家的小灰灰13 分钟前
告别 Prop Drilling:Context API 的陷阱、Reducer 模式与原子化状态库原理
前端·javascript·react.js
进击的尘埃16 分钟前
CSS 变量 + 主题切换:从 CSS-in-JS 回归原生方案的实践之路
javascript
wuhen_n17 分钟前
Suspense:异步组件加载机制
前端·javascript·vue.js
wuhen_n18 分钟前
Teleport:渲染到任意DOM节点
前端·javascript·vue.js
进击的尘埃19 分钟前
组合式函数的设计模式:如何写出真正可复用的 Vue3 Composables
javascript
我叫黑大帅40 分钟前
前端总说的防抖与节流到底是什么?
前端·javascript·面试
小时前端41 分钟前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
掘金安东尼43 分钟前
从平面到空间:用 React Three Fiber 构建 3D 产品网格
前端·javascript·面试
swipe1 小时前
#用这 9 个浏览器 API,我把页面从“卡成 PPT”救回到 90+(每个都有能直接抄的例子)
前端·javascript·面试