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

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 天前
《全栈开源智能体:终结企业AI拼图时代》
人工智能·后端·深度学习·小程序·前端框架·开源·语音识别
康一夏1 天前
React面试题,封装useEffect
前端·javascript·react.js
❆VE❆1 天前
WebSocket与SSE深度对比:技术差异、场景选型及一些疑惑
前端·javascript·网络·websocket·网络协议·sse
ConardLi1 天前
SFT、RAG 调优效率翻倍!垂直领域大模型评估实战指南
前端·javascript·后端
over6971 天前
🌟 JavaScript 数组终极指南:从零基础到工程级实战
前端·javascript·前端框架
源猿人1 天前
前端批量请求的并发控制与工程化实践
javascript
weipt1 天前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
懒大王、1 天前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览
前端·javascript·vue.js·openseadragon·mrxs
诗意地回家1 天前
淘宝小游戏反编译
开发语言·前端·javascript
徐同保1 天前
react两个组件中间加一个可以拖动跳转左右大小的功能
前端·javascript·react.js