Vue实现滚动页面头部背景渐变实现

最新推荐文章于 2023-09-20 08:56:48 发布
最新推荐文章于 2023-09-20 08:56:48 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SANJIN0527_/article/details/107885608
版权
本文介绍了如何在Vue项目中实现在页面滚动时，头部背景渐变的效果。首先，通过设置div的定位和v-show来控制显示。接着，利用data中的属性和v-show控制'Header'栏的显示，并应用动态样式opacityStyle。然后，监听滚动事件，利用mounted和destroyed生命周期钩子，以及activated和deactivated来处理组件的状态。最后，通过绑定opacityStyle样式，使头部的透明度随滚动距离变化，达到渐变效果。
摘要由CSDN通过智能技术生成

一、在页面加载完成后，在开始滚动之前：

将返回按钮所在的div 设置绝对定位，用标志位isSHow设置v-show

<div class="iconfont back_up" @click="gotoup" v-show="isSHow">&#xe60d;</div>

先在data中定义属性:

data(){
   
	return {
   
		showhash:true,   //显示隐藏的头部
		 isSHow: true,    //默认显示的返回按钮
	}
}

将"Header"栏所在的div 设置固定定位，用标志位showhash设置v-show
:style=“opacityStyle” 这个不懂什么意思看下面


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  苏三金
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Vue 实现页面滑动顶部固定栏背景渐变

				
			

			

				

					aapning的博客
				

				

					12-02
					
					3560
					
				

			

		

		

			
				
今天在做毕业设计的时候，想加一个经常都可以看到的视觉交互，如下图一样

这个效果在很多的页面都会有，所以应该是一个很经常要用到的功能，我做出来之后想分享出来给需要用到这个功能的朋友。
实现这个效果的代码网上有很多，当初我想实现的时候，也没直接在网上找，毕竟是前端资深菜鸟嘛，遇到需求了当然是第一时间自己想办法解决，实在实现不了再到网上找，这样有助于成长。
思路：
要实现这个功能，第一步就是要监听页面...

			
		

	



                

            
              



	

		

			

				
					
微信小程序 (vue+uniapp)--自定义导航栏头部、滑动渐变（仿小米小程序首页）

				
			

			

				

					weixin_41678837的博客
				

				

					08-04
					
					6089
					
				

			

		

		

			
				
文章目录前言一、效果（小米小程序）二、我仿的效果三、代码逻辑1.index.jsx2.index.less3.index.config.js总结
前言
一、效果（小米小程序）
二、我仿的效果
三、代码逻辑
1.index.jsx
2.index.less
3.index.config.js
总结

...

			
		

	



              


  
              

                


	

		

			

				
					
vue 顶部栏随页面滚动背景渐变

				
			

			

				

					qq_63138632的博客
				

				

					03-07
					
					887
					
				

			

		

		

			
				
前三个值（红绿蓝）的范围为0到255之间的整数，根据个人自行更改，有需要也改变rgb的值实现滑动渐变，道理同上，第四个值为透明度同opacity 属性一样。优化：页面回到了顶部，也就是说 scrollTop 为0的时候，将backgroundColor重置为 transparent。scrollTop 是页面监听到到组件的滚动位置，当组件滚动的时候，scrollTop 的值就会改变。第二步：给变化的元素绑定backgroundColor属性，再在data中定义。第一步：先监听页面滚动，再方法定义使用。

			
		

	





	

		

			

				
					
vue中实现滚动头部导航背景变色

				
			

			

				

					weixin_44953689的博客
				

				

					09-02
					
					2344
					
				

			

		

		

			
				
<template>
  <div class="header" :style="style" :class="{ color: color }">
    这是头部
  </div>
</template>
<script>
export default {
  data() {
    return {
      style: {
        backgroundColor: "",
      },
      color: false

			
		

	



		

			
		



	

		

			

				
					
css样式vue元素从一个背景色和字体颜色缓缓变成另一种颜色

				
			

			

				

					stars______的博客
				

				

					03-30
					
					574
					
				

			

		

		

			
				
hover悬停在元素上。.2s为渐变时间是2秒。

			
		

	





	

		

			

				
					
vue实现页面滑动头部header固定栏背景渐变

				
			

			

				

					sslcsq的博客
				

				

					03-09
					
					3030
					
				

			

		

		

			
				
因为代码是我自己要看的 所以我自己看得懂就好了哈哈~直接上代码（有注释）
<template>
  <div>
      <div class="header" :style="{background:color}">
              header
      </div>
      <div class="banner" id...

			
		

	





	

		

			

				
					
vue3头部滚动渐变

					
最新发布

				
			

			

				

					08-16
				

			

		

		

			
				
在 Vue3 中实现页面头部的滚动渐变效果，通常可以结合 CSS 和 Vue 的动态数据绑定能力来完成。这种效果可以通过 CSS 动画配合 scrollTop 变量来达成。下面是一个基本的步骤：  1. 首先，在 HTML 上创建一个包含背景...

			
		

	





	

		

			

				
					
利用swiper，fullPage.js，vue实现全屏纵向滚动，嵌套横向滚动的首页，导航栏滚屏，适应部分手机端

				
			

			

				

					weixin_44040143的博客
				

				

					12-03
					
					2130
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no,initial-scale=1.0, m...

			
		

	





	

		

			

				
					
H5 吸顶效果 | 页面滚动改变header透明度

				
			

			

				

					然后他就拿棍子来打我
				

				

					02-03
					
					692
					
				

			

		

		

			
				
监听页面滚动，超过设定阀值，改变position 属性（fixed| static）监听页面滚动，超过设定阀值改变透明度（切换class | 设置opcity）

			
		

	





	

		

			

				
					
记录Vue中将固定元素滚动一定高度后填充背景色

				
			

			

				

					yh0016的博客
				

				

					05-14
					
					871
					
				

			

		

		

			
				
实现将置于顶部的头导航栏的透明色，经过鼠标下滚后，加上背景色
图一：

图二：

如这两张图的效果，将图一变为图二，同时也可将图二变为图一。
首先，该元素是固定元素，将它固定在浏览器顶部，然后加一个ref来获取该元素
<nav ref="viewBox"></nav>

这里是js方法监听滚轮并且将背景色改变
mounted(){
    //监听滚轮滚动事件
    window.document.body.onscroll = () => {
      if (docum

			
		

	





	

		

			

				
					
vue 封装组件之顶部导航栏随着页面滚动变化颜色

				
			

			

				

					qq_43477721的博客
				

				

					08-27
					
					3401
					
				

			

		

		

			
				
NavigationBar.vue
<template>
  <div
    class="nav-bar z-index-max"
    :class="{'bottom-line': pageName}"
    :style="navBarStyle"
  >
    <div class="left">
      <img v-if="isShowBack" src="@img/back.svg" alt="">
      <slot n

			
		

	





	

		

			

				
					
vue页面添加背景滚动动画（translate实现）

				
			

			

				

					weixin_44258964的博客
				

				

					04-01
					
					1745
					
				

			

		

		

			
				
vue的背景动画

			
		

	





	

		

			

				
					
VUE3 实时监听页面滚动高度 ，改变nav/title的 透明度

				
			

			

				

					Eternity_matt的博客
				

				

					10-31
					
					2295
					
				

			

		

		

			
				
VUE3 实时监听页面滚动高度 ，改变nav/title的 透明度（分享写法，记录）
data
data() {
    return {
      scroll: "",
      percent: "",
    };
  },

mounted
mounted() {
    window.addEventListener("scroll", this.menu);
  },

computed
computed: {
    changeColor() {
     let  percent= 

			
		

	





	

		

			

				
					
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果

				
			

			

				

					看花容易绣花难
				

				

					09-19
					
					1936
					
				

			

		

		

			
				
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果

			
		

	





	

		

			

				
					
Vue中使用纯CSS实现全屏网格加渐变色背景布局

				
			

			

				

					jclee95的个人博客
				

				

					05-31
					
					3844
					
				

			

		

		

			
				
假设你已经在Node.js后端创建了一个基本的vue项目框架，如果不会的话可以先参考这篇文章：
https://blog.csdn.net/qq_28550263/article/details/117408874
。
现在，我们先看一看项目结构：

接下来我们就在App.vue中，随页面背景进行更改。
我们需要在<template></template>下建立两个div，一个用于绘制网格，另一个用于绘制渐变背景色：
<!--这里是第一层div，用来放网格-->
<

			
		

	





	

		

			

				
					
vue中使用swiper6、vue-awesome-swiper渐变效果、多图轮播及单图轮播

				
			

			

				

					gengtieguang的博客
				

				

					08-28
					
					3498
					
				

			

		

		

			
				
第一步（下载）
npm i swiper vue-awesome-swiper -S
第二步（使用）
<template>
  <div class="wrapper">
    <Swiper  v-if="swiperList.length>1" ref="mySwiper" :options="swiperOption" class="swiper-container">
      <SwiperSlide class="swiper-item" v-

			
		

	





	

		

			

				
					
Vue实现头部渐隐渐现效果

				
			

			

				

					weixin_41909712的博客
				

				

					02-26
					
					1363
					
				

			

		

		

			
				
1、编写html

           

           eg：   router-link：路由跳转

                      tag="div"：创建div标签

                      to="/" ：返回上一级              

2、data数据

           

           eg：如data里面的数据所看
...

			
		

	





	

		

			

				
					
vue 计算滚动距离顶部距离 改变背景色及文字

				
			

			

				

					Mr_zrh的博客
				

				

					09-20
					
					365
					
				

			

		

		

			
				
【代码】vue 计算滚动距离顶部距离 改变背景色及文字。

			
		

	





	

		

			

				
					
Vue 节流防抖 滑动变色

				
			

			

				

					weixin_47353884的博客
				

				

					03-26
					
					274
					
				

			

		

		

			
				
首先安装
https://www.lodashjs.com/
npm i lodash -S

然后main.js引入
import _ from 'lodash'
Vue.use(_)

这样引入 直接就可以用_.throttle不需要加this
  mounted() {
   window.addEventListener("touchmove", _.throttle(this.handleChageColor), true);
  },

写个方法
lengths就是主体 滑动的部分
<se

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值