线性渐变区域

功能说明

线性渐变区域，可以作为背景或者半透明遮罩等

截图

支持渠道

✅ 已支持 🔶 部分支持 ❌ 尚未支持 🚫 不能支持 🚚 开发中 ❓ 尚未验证

| RN | WXAPP | ALIAPP | TT | H5 | H5_WX | H5_ALIPAY | H5_SuperAPP | | :-: | :---: | ------ | :-: | :-: | :---: | :-------: | :---------: | | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

示例+说明

...
import CptLinearGradient from '@/cptLinearGradient'

const colors = [{color: '#ff6955', opacity:1}, { color: '#32cd32',opacity: 0.5 }, { color: '#708090',opacity: 0.5 }, { color: '#00ffff',opacity: 0.5 }]

...
   <CptLinearGradient
            style={{ width: Taro.pxTransform(400), height: Taro.pxTransform(200)}}
            startColor='red'
            endColor='#00FF00'
            rotate={45}
            startOpacity={0.5}
            colors={colors}
          />

参数

| APIs | 说明 | 是否必须 | 默认 | | ------------ | :---------------------------------: | :------: | ------- | | style | 样式 | 否 | | | rotate | 旋转(默认从上到下，取值范围[0,360]) | 否 | 0 | | startColor | 起始颜色 (支持 white 和#FFFFFF) | 否 | #ffffff | | endColor | 结束颜色 (支持 white 和#FFFFFF) | 否 | #ffffff | | startOpacity | 起始透明度 | 否 | 0 | | endOpacity | 结束透明度 | 否 | 1 | | colors | 多个渐变色设置 | 否 | [] |

colors

| colors | 说明 | 是否必须 | 默认 | | ------- | :---------------: | :------: | ----------------------- | | color | 颜色 | 是 | | | opacity | 透明度 | 是 | 1 | | offset | 偏移量 【0-100%】 | 否 | 默认按照 color 数量平分 |

注意

1. 在 rn 端，修改组件属性不会更新本组件，请使用 key 值来强制更新本组件
2. [startColor, endColor] 与 colors 属性只能提供一种，同时提供会以 colors 属性为准
3. offset 要么全部设置, 要么全部不设置