# ScaleBackground

**Repository Path**: l-x-f/scale-background

## Basic Information

- **Project Name**: ScaleBackground
- **Description**: uni-app 
抖音个人中心下拉背景缩放组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 0
- **Created**: 2022-06-06
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: uniapp

**Tags**: uni-app

## README

# ScaleBackground 抖音个人中心下拉背景缩放组件

## 使用示例

```html
<template>
  <div class="details-page">
    <!-- 背景 -->
    <ScaleBackground class="nav-bar-image" />

    <div>我是内容区域</div>
  </div>
</template>

<script setup>
  import ScaleBackground from '@/components/scale-background'
</script>

<style scoped>
  .details-page {
    box-sizing: border-box;
    padding-bottom: 100px;
  }
  .nav-bar-image {
    width: 100%;
    background-image: url('@/static/sea.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 380rpx;
    box-sizing: border-box;
    background-color: #018ac7;
  }
</style>
```

## Attributes

| 类型 | 说明                 | 数据类型 | 默认值说明 |
| ---- | -------------------- | -------- | ---------- |
| step | 动画步长             | Number   | 2          |
| top  | 背景高度（顶部距离） | Number   | 190        |

## Vue 版本支持

仅支持 vue3.2 以上版本