vue3+Ts 在 script setup 模式下监听页面滚动，并调用子组件的方法设置样式

原创已于 2022-08-05 15:42:32 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript

于 2022-08-05 10:55:07 首次发布

本文介绍了如何在Vue.js中，通过监听滚动事件动态改变顶部公共组件header.vue的背景色。父组件home.vue使用ref获取Q-Header实例，并在滚动时计算滚动位置，根据位置调整背景色透明度。子组件header.vue提供了setBgColor方法来设置背景色，允许外部调用。滚动过程中使用延时器确保滚动结束时才执行背景色更新。

需求：制作网站时，顶部 header.vue（公共组件）需要随着网页内容垂直方向滚动时的位置变化，动态改变其背景色。

父组件 home.vue 代码：

<template>
    <Q-Header ref="myHeader"></Q-Header>
    <div ref="myDiv">
		父组件代码...
	</div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import QHeader from '@/components/header.vue'

const myHeader = ref<any>(null)
const myDiv = ref<any>(null)
const myDivH = ref<number>(0)
const oldScrollTop = ref<number>(0); // 记录上一次滚动结束后的滚动距离
const scrollTop = ref<number>(0); // 记录当前的滚动距离
const scrollHandle = () => {
    scrollTop.value = window.scrollY;	//滚动条距离浏览器顶部高度
    if (!myDivH.value) {
        myDivH.value = myDiv.value.offsetHeight;
    }
}
onMounted (() => {
    myHeader.value.setBgColor(0);   //将 header.vue组件的背景设置为透明
    window.addEventListener('scroll', scrollHandle);
})
onBeforeUnmount(() => {
    window.removeEventListener('scroll', scrollHandle)
})

watch(
    () => scrollTop.value,
    (newValue, oldValue) => {
         setTimeout(() => {
            if (newValue === window.scrollY) {
                // 延时执行后当newValue等于window.scrollY，代表滚动结束
                // console.log('滚动结束');
                oldScrollTop.value = newValue; // 每次滚动结束
                if (myDivH) {
                    let i = scrollTop.value / myDivH.value;
                    //调用子组件 header.vue 中的方法setBgColor，设置背景色
                    if (i > 1) {
                        myHeader.value.setBgColor(1)
                    } else {
                        myHeader.value.setBgColor(i.toFixed(2))
                    }
                }
            }
         }, 20); // 需要使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
        if (oldScrollTop.value === oldValue) {
            // 每次滚动开始时oldScrollTop与oldValue相等
            console.log('滚动开始');
        }
    }
)
</script>

子组件 header.vue 代码

<script setup lang="ts">
import { ref, defineExpose } from 'vue'

let bgColor = ref<string>(`rgb(37,41,46)`)

// 动态设置背景色透明度
const setBgColor = (v:number) => {
    bgColor.value = `rgba(37,41,46,${ v })`
}
defineExpose({ setBgColor })	//内部方法，供外部调用
</script>
<template>
    <div :style="{'background': bgColor}">
        <div>
            子组件代码...
        </div>
    </div>
</template>