更新记录

0.0.2（2026-05-11）

优化

0.0.1（2026-05-11）

• 支持四个方向的渐变模糊（top/bottom/left/right）
• 新增 tint 参数，支持浅色/深色/自定义色调
• 支持自定义模糊强度和区域大小
• 支持渐变精度调整

平台兼容性

uni-app(5.0)

uni-app x(5.0)

lime-gradient-blur

渐变模糊组件 - 支持四个方向的模糊渐变效果

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-gradient-blur
2. 导入后可能需要重新编译项目
3. 在页面中使用 l-gradient-blur 组件

快速开始

 <view class="container">
    <image class="background" src="/static/bg.jpg" mode="aspectFill" />

    <!-- 顶部渐变模糊 -->
    <l-gradient-blur
      direction="top"
      :intensity="16"
      :size="150"
    ></l-gradient-blur>
  </view>

使用示例

顶部模糊

<l-gradient-blur direction="top" :intensity="20" :size="180"></l-gradient-blur>

底部模糊

<l-gradient-blur direction="bottom" :intensity="16" :size="100"></l-gradient-blur>

左侧模糊

<l-gradient-blur direction="left" :size="200"></l-gradient-blur>

右侧模糊

<l-gradient-blur direction="right" :size="200"></l-gradient-blur>

带色调的模糊

<!-- 浅色色调 -->
<l-gradient-blur direction="top" tint="light"></l-gradient-blur>

<!-- 深色色调 -->
<l-gradient-blur direction="top" tint="dark"></l-gradient-blur>

<!-- 自定义颜色 -->
<!-- uniappx ios不支持 -->
<l-gradient-blur direction="top" tint="rgba(255, 100, 100, 0.3)"></l-gradient-blur>

Uniappx Android 端用法

Android 端需要指定 blur-view-id，值为模糊目标区域的 scroll-view 或 view 的 id：

  <view>
    <!-- 内容区域，需要设置 id -->
    <scroll-view id="content" class="h-screen" direction="vertical">
      <!-- 内容 -->
    </scroll-view>

    <!-- 顶部模糊导航栏，blur-view-id 指向内容区域 -->
    <view class="fixed top-0 left-0 right-0 h-[180rpx]">
      <l-gradient-blur
        blur-view-id="content"
        direction="top"
        :intensity="16"
        :size="180"
      ></l-gradient-blur>
    </view>
  </view>

顶部导航栏完整示例

<view class="bg-[#1a1a1a]">
    <!-- 顶部模糊导航栏 -->
    <view class="fixed top-0 left-0 right-0 h-[180rpx] safe-top">
      <view class="relative z-10 flex flex-row justify-between items-center p-[20rpx_30rpx]">
        <text class="text-white text-[48rpx] font-semibold">相册标题</text>
        <view class="flex flex-row items-center">
          <view class="px-[28rpx] py-[16rpx] bg-white/20 rounded-full backdrop-blur-xl">
            <text class="text-white">多选</text>
          </view>
        </view>
      </view>
      <l-gradient-blur blur-view-id="content" direction="top" tint="dark" :size="180"></l-gradient-blur>
    </view>

    <!-- 内容区域 -->
    <scroll-view id="content" class="h-screen" direction="vertical">
      <view class="flex flex-wrap">
        <view class="w-[25%] p-[2rpx]" v-for="item in photos" :key="item.id">
          <image :src="item.src" mode="aspectFill" />
        </view>
      </view>
    </scroll-view>
  </view>

Props 参数

注意事项

3. Tint：uniappx iOS 不支持自定义颜色
4. Android：必须指定 blur-view-id 指向模糊目标区域