uniapp页面头部滑动渐变

最新推荐文章于 2023-09-23 22:32:48 发布

-Wack-

最新推荐文章于 2023-09-23 22:32:48 发布

阅读量1.9k

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_59803648/article/details/126593571

版权

应用场景：页面下拉顶部固定不动，头部背景随滑动变成深色用于遮盖上划的内容

头部fixed固定不动，包含状态栏和导航栏，

同时设置背景颜色为变量，变量默认透明rgba(255, 255, 255, 0)

<template>
<view style="position: fixed;top: 0;left: 0;width: 100%;z-index: 99;" :style="{'background-color':backColor}">
....
</view>
</template>
<script>
export default {
    data(){
     return {
        backColor: 'rgba(255, 255, 255, 0)
      }
    },
onPageScroll(res) {
     //获取距离顶部距离
     const scrollTop = res.scrollTop;
     if (scrollTop >= 0) {
      // 导航条颜色透明渐变
      if (scrollTop <= 20) {
       this.backColor = 'rgba(255, 255, 255, 0)'
      } else if (20 < scrollTop && scrollTop <= 100) {
       this.backColor = 'rgba(255, 255, 255, .5)'
      } else if (scrollTop > 100) {
       this.backColor = 'rgba(255, 255, 255, 1)'
      }
     }
    },
}

</script>