#vue3 #uni-app

uni-app 下拉背景缩放组件

类似抖音个人中心效果

源码地址

源码地址

使用效果

在这里插入图片描述

使用示例

1
<template>
2
  <div class="details-page">
3
    <!-- 背景 -->
4
    <ScaleBackground class="nav-bar-image" />
5
6
    <div>我是内容区域</div>
7
  </div>
8
</template>
9
10
<script setup>
11
  import ScaleBackground from '@/components/scale-background'
12
</script>
13
14
<style scoped>
15
  .details-page {
16
    box-sizing: border-box;
17
    padding-bottom: 100px;
18
  }
19
  .nav-bar-image {
20
    width: 100%;
21
    background-image: url('https://xf-1252186245.cos.ap-chengdu.myqcloud.com/sea.png');
22
    background-size: contain;
23
    background-repeat: no-repeat;
24
    padding-top: 380rpx;
25
    box-sizing: border-box;
26
    background-color: #018ac7;
27
  }
28
</style>

Attributes

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

Vue 版本支持

仅支持 vue3.2 以上版本

#vue3 #uni-app