【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飞车,可一起来玩玩鸭~

相关推荐
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck11 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
尚学教辅学习资料13 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23413 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟13 小时前
小程序跳转另一个小程序
小程序
17 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
20 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji20 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域1 天前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app