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

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"
    });
  }
});
相关推荐
wangfpp23 分钟前
性能优化,请先停手:为什么我劝你别上来就搞优化?
前端·javascript·面试
三旬81 小时前
Day.js 源码深度剖析:极简时间库的设计艺术
javascript
清风徐来QCQ1 小时前
js中的模板字符串
开发语言·前端·javascript
SuperEugene2 小时前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧2 小时前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
2501_933907213 小时前
南京本凡科技,怎么选择专业小程序开发才能提升品牌竞争力?
科技·微信小程序·小程序
软弹3 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
雪碧聊技术3 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
han_3 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式
x***r1513 小时前
Notepad++ 8.6 安装教程:详细步骤+自定义安装路径(附注意事项)
linux·前端·javascript