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

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"
    });
  }
});
相关推荐
2501_9339072135 分钟前
深圳本凡科技专业企业APP开发,助力手机应用创新优化
科技·微信小程序·小程序
xiaoxue..1 小时前
合并两个升序链表 与 合并k个升序链表
java·javascript·数据结构·链表·面试
要加油哦~2 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
一个public的class2 小时前
你在浏览器输入一个网址,到底发生了什么?
java·开发语言·javascript
青茶3602 小时前
php怎么实现订单接口状态轮询请求
前端·javascript·php
每天都要加油呀!2 小时前
TypeError: uni.requestPayment is not a function
小程序
火车叼位2 小时前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python
VT.馒头2 小时前
【力扣】2727. 判断对象是否为空
javascript·数据结构·算法·leetcode·职场和发展
java1234_小锋3 小时前
分享一套优质的微信小程序校园志愿者系统(SpringBoot后端+Vue3管理端)
微信小程序·小程序·校园志愿者
鱼毓屿御3 小时前
如何给用户添加权限
前端·javascript·vue.js