<template>
<view class="page">
<scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;">
<view :class="['sticky-header', { sticky: isSticky }]" :style="headerStyle">
<uni-status-bar></uni-status-bar>
<view style="display: flex; justify-content: space-between; padding: 24rpx">
<view style="display: flex; justify-content: center; align-items: center">
<view @click="getLocal" style="height: 100%; display: flex; align-items: center;">
<text :style="isSticky ? 'color: #fff;' : ''" class="address_ellipsis">{{ userPosition }}</text>
</view>
</view>
</view>
<view style="width: 90%; margin: 5px auto;" class="search-box flex-cn" @click="toSearchGoods">
<text :style="isSticky ? 'color: #fff;' : ''" class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
<text :style="isSticky ? 'color: rgba(255, 255, 255, 0.7);' : ''" class="search-text">请输入商品名称</text>
<view :style="isSticky ? 'background-color: #fff; color: #4570FF;' : ''" class="search-button">搜索</view>
</view>
</view>
<view class="content">
<view v-for="i in 100" :key="i" style="height: 200rpx;">内容 {{ i }}</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
isSticky: false,
scrollProgress: 0,
userPosition: '选择位置',
};
},
computed: {
headerStyle() {
return {
backgroundColor: this.isSticky ? 'rgba(69, 112, 255, 1)' : 'transparent',
};
},
},
methods: {
handleScroll(e) {
const scrollTop = e.detail.scrollTop;
this.isSticky = scrollTop > 1;
this.scrollProgress = Math.min(scrollTop / 200, 1);
},
getLocal() {
console.log('获取位置');
},
toSearchGoods() {
console.log('跳转到搜索页面');
},
},
};
</script>
<style scoped>
.page {
height: 100vh;
overflow: hidden;
}
.sticky-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10;
transition: background-color 1s ease;
}
.sticky-header.sticky {
position: fixed;
}
.content {
padding: 20rpx;
}
.search-box {
background-color: #fff;
border-radius: 15rpx;
display: flex;
align-items: center;
padding: 10rpx;
}
.search-button {
margin-left: auto;
background-color: #4570FF;
color: #fff;
padding: 5rpx 10rpx;
border-radius: 10rpx;
}
.address_ellipsis {
max-width: 200rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-text {
margin-left: 10rpx;
color: #999;
}
.flex-cn {
display: flex;
align-items: center;
}
</style>
uniapp 头部固定 渐变 基本业务
最新推荐文章于 2024-09-02 16:43:18 发布