滚动顶部渐变动画

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();

// 获取页面栈
const pages = getCurrentPages();
// 基于小程序的 Page 类型扩展 uni-app 的 Page
type PageInstance = Page.PageInstance &
  WechatMiniprogram.Page.InstanceMethods<any>;

// #ifdef MP-WEIXIN
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as PageInstance;

// 页面渲染完毕，绑定动画效果
onReady(() => {
  // 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar',
    [{ backgroundColor: 'red' }, { backgroundColor: '#f8f8f8' }],
    1000,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  );
  // 动画效果,导航栏标题
  pageInstance.animate(
    '.navbar .title',
    [{ color: 'transparent' }, { color: '#000' }],
    1000,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  );
});
</script>

<template>
  <view class="box">
    <view class="navbar" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
      <view class="wrap">
        <view class="title">qianba钱包</view>
      </view>
    </view>
    <scroll-view id="scroller" enable-back-to-top scroll-y class="viewport">
      <template>
        <view v-for="item in 100" :key="item">{{ item }}</view>
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#scroller {
  overflow: scroll;
  height: 80vh;
}
.title {
  text-align: center;
}
</style>