更新记录

1.0.0（2022-06-06）

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

平台兼容性

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

使用示例

<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

Vue 版本支持

仅支持 vue3.2 以上版本