【Uniapp小程序】自定义导航栏uni-nav-bar滚动渐变色

效果图

新建activityScrollTop.js作为mixins

javascript 复制代码
export default {
  data() {
    return {
      navBgColor: "rgba(0,0,0,0)", // 初始背景颜色为完全透明
      navTextColor: "rgba(0,0,0,1)", // 初始文字颜色
    };
  },
  onPageScroll(e) {
    // 设置背景
    const newAlpha = Math.min((e.scrollTop / 100) * 1, 1);
    this.navBgColor = `rgba(${this.shadeBackground},${newAlpha})`;
    // 设置文字
    const progress = Math.min(e.scrollTop, 255) / 255;
    const [r, g, b] = this.shadeTextColor.split(",").map(Number);
    const newTextRgb = Math.min(e.scrollTop * 5, 255);
    const newRgb = [r, g, b].map((targetValue) => {
      return Math.min(newTextRgb + (targetValue - newTextRgb) * progress, 255);
    });
    this.navTextColor = `rgba(${newRgb.join()},1)`;
  },
};

使用方法

第一步,引入上方js

javascript 复制代码
import activityScrollTop from "../../js/activityScrollTop";
export default {
  mixins: [activityScrollTop],
}

第二步:

关键:backgroundColor和color

javascript 复制代码
<uni-nav-bar
  :leftIcon="图标"
  :border="false"
  @clickLeft="方法名"
  :backgroundColor="navBgColor"
  fixed
  statusBar
  :color="navTextColor"
  title="活动详情"
></uni-nav-bar>

第三步:

data

javascript 复制代码
// 渐变导航背景颜色
shadeBackground: "254,181,89",
// 渐变导航的文字颜色
shadeTextColor: "255,255,255",

看效果即可!

感谢你的阅读,如对你有帮助请收藏+关注!

只分享干货实战精品从不啰嗦!!!

如某处不对请留言评论,欢迎指正~

博主可收徒、常玩QQ飞车,可一起来玩玩鸭~

相关推荐
2501_915909063 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106323 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909063 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007473 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城3 小时前
CRMEB多商户系统(PHP)v3.3正式发布,同城配送上线[特殊字符]
java·开发语言·小程序·php
尘似鹤7 小时前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
2501_916008899 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌9 小时前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序
源码_V_saaskw9 小时前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序