<template>
<view class="container">
<view class="header">
<view class="header-bg" :style="headerStyle"></view>
<view class="header-inner">
<view style="width: 100%;" class="search-box flex-cn" @click="toSearchGoods">
<text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
<text class="search-text">请输入商品名称</text>
<view class="search-button">搜索</view>
</view>
</view>
</view>
<scroll-view @scroll="onScroll" scroll-y="true" class="content">
<view class="content-items">
<view v-for="item in 50" :key="item" class="item">内容 {
{ item }}</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0, // 滚动位置
};
},
computed: {
headerStyle() {
// 计算透明度,滚动超过300px时透明度为0
const opacity = Math.max(1 - this.scrollTop / 100, 0);
return {
backgroundImage: `url(".png")`,
backgroundSize: 'cover',
backgroundPosition: 'center',
height: '300rpx',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
opacity: opacity,
transition: 'opacity 0.5s',
};
},
},
methods: {
onScroll(event) {
this.scrollTop = event.detail.scrollTop;
},
},
};
</script>
<style scoped lang="less">
.search-box {
position: sticky;
top: 0;
border: 1px solid #f5f5f5;
margin-left: 24rpx;
width: 400rpx;
height: 66rpx;
background-color: #ffffff;
border-radius: 34rpx;
padding-left: 10rpx;
box-sizing: border-box;
line-height: 32rpx;
.search-icon {
font-size: 28rpx;
color: #999999;
}
.search-text {
font-size: 28rpx;
color: #999999;
margin-left: 12rpx;
}
.search-button {
color: #000;
border-radius: 20px;
height: 56rpx;
width: 122rpx;
line-height: 56rpx;
margin-left: auto;
text-align: center;
font-size: 28rpx;
}
}
.container {
height: 100vh;
overflow: hidden;
}
.header {
z-index: 10;
position: relative;
width: 100%;
height: 300rpx;
}
.header-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 300rpx;
z-index: -1;
}
.header-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content {
padding-top: 300rpx; /* 确保内容不被头部遮挡 */
height: 100%;
overflow: scroll;
}
.content-items {
padding: 20px;
background-color: #f5f5f5;
height: 2000px;
}
.item {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-align: center;
}
</style>
过渡背景图头部 透明
猜你喜欢
转载自blog.csdn.net/qq_44759522/article/details/140061427
今日推荐
周排行