vue背景怎么添加（滚动顶部添加背景色）

html 代码

<template> <div class="index-top flex flex-ac flex-jsb" :style="pstyle"> <van-image :src="logoUrl" /> <van-icon name="manager-o" @click="onClickUser" /> </div> </template>

js 代码

<script> export default { name: "topBtn", data() { return { logoUrl: require("@/assets/images/logo.png"), pstyle: { background: "rgba(0,0,0,0)" }, pbstyle: { background: "rgba(40,148,255,0.8)" } }; }, mounted() { //首先，在mounted钩子window添加一个滚动滚动监听事件 window.addEventListener("scroll", this.handleScroll); }, methods: { // 打开详情页 onClickUser() { this.$router.push({ path: "/user" }); }, //然后在方法中，添加这个handleScroll方法来获取滚动的位置 handleScroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 40) { this.pstyle = this.pbstyle; } else { this.pstyle = this.pastyle; } } }, //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错 beforeDestroy() { window.removeEventListener("scroll", this.handleScroll); } }; </script>,