[JavaScript知识库]uni-app 下拉背景缩放组件

uni-app 下拉背景缩放组件

类似抖音个人中心效果

源码地址

源码地址

使用效果

使用示例

<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('https://xf-1252186245.cos.ap-chengdu.myqcloud.com/sea.png');
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 380rpx;
    box-sizing: border-box;
    background-color: #018ac7;
  }
</style>

Attributes

Vue 版本支持

仅支持 vue3.2 以上版本