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

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"
    });
  }
});
相关推荐
Java~~几秒前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
程序员爱钓鱼25 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白27 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
JQShan40 分钟前
React Native小课堂:箭头函数 vs 普通函数,为什么你的this总迷路?
javascript·react native·ios
至尊童40 分钟前
5个Web开发中的使用技巧
javascript·html
冰镇生鲜1 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
前端大白话1 小时前
前端人必看!10个Vue3救命技巧,专治性能差、代码乱
前端·javascript·vue.js
江城开朗的豌豆1 小时前
JavaScript篇:JavaScript中的深浅拷贝:原理、实现与应用
前端·javascript·面试
爱看书的小沐1 小时前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js
江城开朗的豌豆1 小时前
JavaScript篇:深入解析URL结构:前端开发者必备的网址知识
前端·javascript·面试