更新记录

1.0.3（2025-07-12） 下载此版本

修复Vue2环境下语法错误导致编译失败的问题 移除data()方法前的多余逗号，确保Vue2兼容性

1.0.2（2025-07-11） 下载此版本

修复若干已知bug

1.0.1（2025-07-11） 下载此版本

修复

平台兼容性

uni-app(4.36)

uni-app x(4.41)

其他

🚀 *** Backdrop - 强大的 uni-app 背景组件

一个功能强大、设计精美的 uni-app 通用背景组件，支持多种视觉效果和交互功能。

✨ 特性

• 🎨 丰富的背景效果：纯色背景、图片背景、渐变背景
• 🌊 弧形装饰：内凹、外凸、波浪等多种弧形效果
• 🎭 科技感配色：内置多种渐变和弧形预设
• 📱 多端兼容：支持 H5、小程序、App 等全平台
• 🎯 交互功能：点击、长按、视差滚动等交互支持
• ⚡ 高性能：优化的渲染机制，流畅不卡顿
• 🔧 易于使用：简单的 API，丰富的预设效果

📦 平台兼容性

📦 安装

通过 DCloud 插件市场安装

1. 在 DCloud 插件市场 搜索 "***-backdrop"
2. 点击下载并导入到项目，HBuilderX 会自动安装

手动安装

1. 将 ***-backdrop 文件夹复制到项目的 uni_modules 目录下
2. 重新编译项目

🚀 快速开始

基础用法

<template>
  <***-backdrop 
    background-color="#4facfe"
    height="400rpx"
  >
    <view>你的内容</view>
  </***-backdrop>
</template>

渐变背景

<template>
  <!-- 使用预设渐变 -->
  <***-backdrop 
    gradient-preset="neon-blue"
    height="400rpx"
  >
    <view>霓虹蓝科技感背景</view>
  </***-backdrop>

  <!-- 自定义渐变 -->
  <***-backdrop 
    :gradient="{
      type: 'linear',
      direction: '135deg',
      stops: [
        { color: '#00d4ff', position: '0%' },
        { color: '#5b21b6', position: '100%' }
      ]
    }"
    height="400rpx"
  >
    <view>自定义渐变</view>
  </***-backdrop>
</template>

弧形效果

<template>
  <!-- 外凸弧形 -->
  <***-backdrop 
    gradient-preset="electric-pink"
    curve-preset="tech-gentle"
    height="400rpx"
  >
    <view>科技感弧形效果</view>
  </***-backdrop>

  <!-- 内凹弧形 -->
  <***-backdrop 
    gradient-preset="matrix-green"
    curve-preset="concave-modern"
    height="400rpx"
  >
    <view>现代内凹效果</view>
  </***-backdrop>
</template>

轮播背景

<template>
  <***-backdrop 
    :carousel="{
      images: [
        '/static/bg1.jpg',
        '/static/bg2.jpg',
        '/static/bg3.jpg'
      ],
      interval: 3000,
      autoplay: true
    }"
    height="400rpx"
  >
    <view>轮播背景内容</view>
  </***-backdrop>
</template>

📚 API 文档

Props 属性

Events 事件

Slots 插槽

🎨 预设效果

渐变预设

• neon-blue - 霓虹蓝
• cyber-purple - 赛博紫
• electric-pink - 电光粉
• matrix-green - 矩阵绿
• ***uantum-orange - 量子橙
• tech-rainbow - 科技彩虹
• hologram - 全息投影
• plasma-burst - 等离子爆发
• energy-core - 能量核心
• neon-pulse - 霓虹脉冲

弧形预设

• tech-gentle - 科技温和弧形
• tech-bold - 科技大胆弧形
• neon-top - 霓虹顶部弧形
• concave-modern - 现代内凹
• wave-electric - 电光波浪
• pulse-neon - 霓虹脉冲
• gradient-cyber - 赛博渐变弧形
• glow-bottom - 发光底部弧形
• energy-wave - 能量波浪

🔧 配置详解

渐变配置

const gradient = {
  type: 'linear',        // linear | radial
  direction: '45deg',    // 渐变方向
  stops: [              // 颜色停止点
    { color: '#00d4ff', position: '0%' },
    { color: '#5b21b6', position: '100%' }
  ]
}

弧形配置

const curve = {
  type: 'convex',        // convex | concave | wave
  position: 'bottom',    // top | bottom | both
  height: 60,           // 弧形高度
  width: 1,             // 宽度比例
  color: '#ffffff',     // 颜色
  opacity: 1,           // 透明度
  waveCount: 2,         // 波浪数量(wave类型)
  animation: false,     // 是否动画
  ***: '#ffffff'    // 背景色(concave类型)
}

轮播配置

const carousel = {
  images: [],           // 图片数组
  interval: 3000,       // 切换间隔
  autoplay: true,       // 自动播放
  circular: true,       // 循环播放
  indicatorDots: true,  // 显示指示器
  duration: 500         // 动画时长
}

🌟 最佳实践

1. 性能优化：避免在同一页面使用过多动画效果
2. 颜色搭配：使用对比度适中的颜色，确保内容可读性
3. 响应式设计：合理设置高度和宽度，适配不同屏幕
4. 交互体验：适当使用点击和视差效果提升用户体验

🐛 常见问题

***: 弧形效果在某些平台不显示？ A: 组件已内置兼容性处理，如遇问题请检查 uni-app 版本是否为最新。

***: 如何实现更复杂的渐变效果？ A: 可以通过 gradient 属性传入自定义配置，支持多个颜色停止点。

***: 动画效果影响性能怎么办？ A: 组件已优化性能，建议控制同时播放的动画数量，必要时可关闭动画。

: 内凹弧形效果不明显？ A: 确保背景色与 有足够对比度，建议使用白色或浅色作为 ***。

*** Backdrop - 让你的应用界面更精彩！