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

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"
    });
  }
});
相关推荐
流***陌1 小时前
宠物寄养美容小程序前端功能解析:贴心照料宠物的全流程支撑
小程序·宠物
千叶寻-1 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
小小王app小程序开发4 小时前
任务悬赏小程序深度细分分析:非技术视角下的运营逻辑拆解
大数据·小程序
2501_915918415 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
記億揺晃着的那天8 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing9 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿9 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy9 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc9 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy9 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui