提交 7e56be0a 编写于 作者: L luoying_ace_admin

add docs

Signed-off-by: Nluoying_ace_admin <luoying19@huawei.com>
上级 26bcb584
...@@ -85,7 +85,7 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation? ...@@ -85,7 +85,7 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number&nbsp;\|&nbsp;string | 是 | 水平滑动偏移。<br/>**说明:** <br/>该参数值不支持设置百分比。<br/>仅滚动轴为x轴时生效。 | | xOffset | number&nbsp;\|&nbsp;string | 是 | 水平滑动偏移。<br/>**说明:** <br/>该参数值不支持设置百分比。<br/>仅滚动轴为x轴时生效。 |
| yOffset | number&nbsp;\|&nbsp;string | 是 | 垂直滑动偏移。<br/>**说明:** <br/>该参数值不支持设置百分比。<br/>仅滚动轴为y轴时生效。 | | yOffset | number&nbsp;\|&nbsp;string | 是 | 垂直滑动偏移。<br/>**说明:** <br/>该参数值不支持设置百分比。<br/>仅滚动轴为y轴时生效。 |
| animation | {duration?:&nbsp;number, curve?:&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)<sup>10+ </sup>}&nbsp;\|&nbsp;boolean<sup>10+ </sup> | 否 | 动画配置:<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。<br/>- boolean:&nbsp;使能默认弹簧动效。<br/>默认值: <br/>{<br/>duration:&nbsp;1000,<br/>curve:&nbsp;Curve.Ease<br/>}<br/>boolean:&nbsp;false<br/>**说明:** <br/>设置为小于0的值时,按默认值显示。<br/>当前仅List组件支持boolean类型和ICurve曲线。 | | animation | {duration?:&nbsp;number, curve?:&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)<sup>10+ </sup>}&nbsp;\|&nbsp;boolean<sup>10+ </sup> | 否 | 动画配置:<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。<br/>- boolean:&nbsp;使能默认弹簧动效。<br/>默认值: <br/>{<br/>duration:&nbsp;1000,<br/>curve:&nbsp;Curve.Ease<br/>}<br/>boolean:&nbsp;false<br/>**说明:** <br/>设置为小于0的值时,按默认值显示。<br/>当前List、Scroll、Grid、WaterFlow均支持boolean类型和ICurve曲线。 |
### scrollEdge ### scrollEdge
...@@ -184,6 +184,8 @@ scrollBy(dx: Length, dy: Length): void ...@@ -184,6 +184,8 @@ scrollBy(dx: Length, dy: Length): void
```ts ```ts
// xxx.ets // xxx.ets
import Curves from '@ohos.curves'
@Entry @Entry
@Component @Component
struct ScrollExample { struct ScrollExample {
...@@ -224,7 +226,7 @@ struct ScrollExample { ...@@ -224,7 +226,7 @@ struct ScrollExample {
Button('scroll 150') Button('scroll 150')
.height('5%') .height('5%')
.onClick(() => { // 点击后下滑指定距离150.0vp .onClick(() => { // 点击后下滑指定距离150.0vp
this.scroller.scrollBy(0,150) this.scroller.scrollBy(0, 150)
}) })
.margin({ top: 10, left: 20 }) .margin({ top: 10, left: 20 })
Button('scroll 100') Button('scroll 100')
...@@ -233,18 +235,25 @@ struct ScrollExample { ...@@ -233,18 +235,25 @@ struct ScrollExample {
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
}) })
.margin({ top: 60, left: 20 }) .margin({ top: 60, left: 20 })
Button('scroll 100')
.height('5%')
.onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离,滑动过程配置有动画
let curve = Curves.interpolatingSpring(100, 1, 228, 30) //创建一个阶梯曲线
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100, animation: { duration: 1000, curve: curve }})
})
.margin({ top: 110, left: 20 })
Button('back top') Button('back top')
.height('5%') .height('5%')
.onClick(() => { // 点击后回到顶部 .onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top) this.scroller.scrollEdge(Edge.Top)
}) })
.margin({ top: 110, left: 20 }) .margin({ top: 160, left: 20 })
Button('next page') Button('next page')
.height('5%') .height('5%')
.onClick(() => { // 点击后滑到下一页 .onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true }) this.scroller.scrollPage({ next: true })
}) })
.margin({ top: 170, left: 20 }) .margin({ top: 210, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC) }.width('100%').height('100%').backgroundColor(0xDCDCDC)
} }
} }
......
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| linearGradientBlur<sup>10+</sup> | <br/>value: number,<br/>{<br/>fractionStops:Array<FractionStop>,<br/>direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)<br/>} <br/> | - | 为当前组件添加内容线性渐变模糊效果,<br/>-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:[0, +∞)<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom <br/>从API version 10开始,该接口支持在ArkTS卡片中使用。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | - | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时,可指定不同阴影样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | | shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)<sup>10+</sup> | - | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时,可指定不同阴影样式。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)<br/>取值范围:[0, 1]<br/>**说明:** <br/>设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)<br/>取值范围:[0, 1]<br/>**说明:** <br/>设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
...@@ -27,6 +26,7 @@ ...@@ -27,6 +26,7 @@
| sphericalEffect<sup>10+</sup> | [number] | - | 设置组件的图像球面化程度。<br/>取值范围:[0,1]。<br/>**说明:**<br/>1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。<br/> 2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置`syncLoad``true`,但是这种做法不推荐。`backgroundImage`也是使用异步加载,所以如果设置了`backgroundImage`,不支持球面效果。<br/>3. 如果组件设置了阴影,不支持球面效果。<br>此接口为系统接口。 | | sphericalEffect<sup>10+</sup> | [number] | - | 设置组件的图像球面化程度。<br/>取值范围:[0,1]。<br/>**说明:**<br/>1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。<br/> 2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置`syncLoad``true`,但是这种做法不推荐。`backgroundImage`也是使用异步加载,所以如果设置了`backgroundImage`,不支持球面效果。<br/>3. 如果组件设置了阴影,不支持球面效果。<br>此接口为系统接口。 |
| lightUpEffect<sup>10+</sup> | [number] | - | 设置组件图像亮起程度。<br/>取值范围:[0,1]。<br/>如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。 <br>此接口为系统接口。| | lightUpEffect<sup>10+</sup> | [number] | - | 设置组件图像亮起程度。<br/>取值范围:[0,1]。<br/>如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况,`value < 0`按0处理,`value > 1`按1处理。 <br>此接口为系统接口。|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | - | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明:**<br/>1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值,表示内缩,但是最终图像大小不变。<br/>内缩方式:<br/>图像根据`options`的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束:<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。<br/>所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。<br/>所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。<br>此接口为系统接口。 | | pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | - | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明:**<br/>1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值,表示内缩,但是最终图像大小不变。<br/>内缩方式:<br/>图像根据`options`的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束:<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。<br/>所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。<br/>所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。<br>此接口为系统接口。 |
| linearGradientBlur<sup>10+</sup> | <br/>value: number,<br/>{<br/>fractionStops:Array<FractionStop>,<br/>direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)<br/>} <br/> | - | 为当前组件添加内容线性渐变模糊效果,<br/>-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:[0, +∞)<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom <br/>从API version 10开始,该接口支持在ArkTS卡片中使用。 |
## ShadowOptions对象说明 ## ShadowOptions对象说明
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册