uniapp 头部固定 渐变 基本业务

<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>