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

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"
    });
  }
});
相关推荐
neter.asia1 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
光影少年21 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Rattenking26 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
丁总学Java1 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端2 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165023 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui