小程序滚动页面修改导航栏背景色

页面设计是这样的
在这里插入图片描述
页面滚动是这样的效果:导航栏标题被遮挡
在这里插入图片描述
最后实现到那个滚到一定区域后有背景色
在这里插入图片描述

js代码

  onPageScroll: function (e) { // 获取滚动条当前位置
    if (e.scrollTop > 50) {
      this.data.rgb == 1 ? '' : this.setData({
        rgb: 1
      })
    } else {
      this.data.rgb == 0 ? '' : this.setData({
        rgb: 0
      })
    }
  },

wxml页面

在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
对于uniapp开发的小程序,你可以通过以下步骤来实现滚动页面顶部导航栏的透明变白色: 1. 在App.vue中设置全局的顶部导航栏样式: ```css <style> .nav-bar { background-color: transparent; color: #ffffff; } </style> ``` 2. 在每个页面的.vue文件中,监听滚动事件并动态修改顶部导航栏的样式: ```html <template> <view> <!-- 这里是页面内容 --> </view> </template> <script> export default { onScroll(e) { // 获取滚动距离scrollTop const scrollTop = e.detail.scrollTop; // 设置滚动距离阈值,超过该值则将导航栏背景颜色设为白色,否则设为透明 const threshold = 100; // 获取导航栏节点 const navBar = uni.createSelectorQuery().select('.nav-bar'); if (scrollTop > threshold) { navBar.css('background-color', '#ffffff'); navBar.css('color', '#000000'); } else { navBar.css('background-color', 'transparent'); navBar.css('color', '#ffffff'); } }, onPageScroll(e) { this.onScroll(e); }, onReachBottom() { // 页面滚动到底部的时候触发加载更多 } } </script> <style> /* 这里是页面样式 */ </style> ``` 在上述代码中,通过监听页面滚动事件`onPageScroll`和调用`onScroll`方法来实现改变导航栏样式的效果。根据滚动距离设置导航栏的背景颜色,当滚动距离超过阈值时,将导航栏背景颜色设为白色,否则设为透明。请注意,需要将`.nav-bar`替换为你实际使用的顶部导航栏的class或id。 这样就可以实现滚动页面顶部导航栏的透明变白色的效果了。希望能对你有所帮助!如有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值