diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1ed64a34813209609c7ad742281247145489f8cd
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png
deleted file mode 100644
index dc8f8a0cbb105c4d791bb867771bb9bc1bfbb468..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md
index f7f8893c08e1d4e6c84fb5cc93b5ec4874209cda..ca90d9e0df36b92ed67872cc05b5a93a03c2ab57 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md
@@ -49,36 +49,65 @@
```html
-
+
```
```css
/* xxx.css */
.container {
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
}
```
```js
-// ×××.js
+// xxx.js
export default {
- changeFruit(e){
- console.log("newValue:" + e.newValue)
- }
+ data: {
+ array: [
+ {
+ "value": "下拉选项0", "name": "选项0"
+ },
+ {
+ "value": "下拉选项1", "name": "选项1"
+ },
+ {
+ "value": "下拉选项2", "name": "选项2"
+ },
+ {
+ "value": "下拉选项3", "name": "选项3"
+ },
+ ]
+ },
+ getData() {
+ let other = [
+ {
+ "value": "下拉选项a", "name": "选项a"
+ },
+ {
+ "value": "下拉选项b", "name": "选项b"
+ },
+ {
+ "value": "下拉选项c", "name": "选项c"
+ },
+ {
+ "value": "下拉选项d", "name": "选项d"
+ },
+ ]
+ return other
+ },
+ onChange() {
+ this.array = this.getData()
+ }
}
```
-![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.png)
\ No newline at end of file
+![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif
index 9ead4d671531532629b2fbf2f411ce4008dde3ba..0f974cc65ddbbef89654d62efd8391b2d72c810c 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
index 37fd11682e2db8cd265f3ea405fc3f40af8412bb..85cef5202529f9a5fde1ef1ae91390444336fac3 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -349,3 +349,57 @@ struct ImageExample3 {
```
![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif)
+
+### 渲染沙箱路径图片
+
+```ts
+import fileio from '@ohos.fileio'
+import context from '@ohos.application.context'
+
+@Entry
+@Component
+struct LoadImageExample {
+ @State resourcesPath: string = ''
+ @State sandboxPath: string = ''
+ context: context.AbilityContext
+
+ aboutToAppear() {
+ this.context = getContext(this) as context.AbilityContext
+ }
+
+ build() {
+ Column() {
+ Button('读取沙箱图片')
+ .margin({ bottom: 10, top: 10 })
+ .onClick(() => {
+ this.sandboxPath = this.context.getApplicationContext().filesDir + '/icon.png'
+ console.log(`读取沙箱图片=========>${this.sandboxPath}`)
+ let fd = fileio.openSync(this.sandboxPath, 0o100, 0o666)
+ console.log(`create file========>${fd}`)
+ let srcPath = this.context.bundleCodeDir + '/entry/resources/base/media/icon.png'
+ console.log('mySrcpath' + srcPath)
+ fileio.copyFileSync(srcPath, this.sandboxPath) // 复制图片到沙箱路径
+ this.sandboxPath = 'file://' + this.context.getApplicationContext().filesDir + '/icon.png'
+ })
+ Button('读取资源图片')
+ .margin({ bottom: 10 })
+ .onClick(() => {
+ this.resourcesPath = 'file://' + this.context.bundleCodeDir + '/entry/resources/base/media/icon.png'
+ })
+ Text(`资源图片路径:${this.resourcesPath}`)
+ .fontSize(20)
+ .margin({ bottom: 10 })
+ Image(this.resourcesPath)
+ .width(100)
+ .height(100)
+ Text(`沙箱图片路径:${this.sandboxPath}`)
+ .fontSize(20)
+ .margin({ bottom: 10 })
+ Image(this.sandboxPath)
+ .width(100)
+ .height(100)
+ }
+ .width('100%').height('100%')
+ }
+}
+```
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
index 2bc0322f27d016b6d0ae55eec0dcde7cf8f11e07..98e907ab66bc8fabb12dc522ef6a7439bfd26fb7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
@@ -39,6 +39,7 @@ RichText(content:string)
| \\
| 定义段落。 | \这是一个段落\
|
| \
| 插入一个简单的换行符。 | \这是一个段落\
这是换行段落\
|
| \
| 定义HTML页面中的主题变化(比如话题的转移),并显示为一条水平线。 | \这个一个段落\
\
\这是一个段落\
|
+| \\ | 用来定义图片。 | \\ |
| \\
| 常用于组合块级元素,以便通过CSS来对这些元素进行格式化。 | \\
这是一个在div元素中的标题。\
\ |
| \\ | 定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。 | \这是一个斜体\ |
| \\ | 定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词,应尽量避免使用\为文本加下划线,用户会把它混淆为一个超链接。 | \\这是带有下划线的段落\\
|
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
index c7e75844c0510121776eff37d1688f11ee83f6aa..2dab45e8523430be89c0723ba7e7dff2b38352e4 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -31,15 +31,15 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | -------------- | --------------------------- | ---- | ---------------------------------------- |
- | path | string | 是 | hap包内动画资源文件路径,仅支持json格式。示例:path: "common/lottie/data.json" |
- | container | object | 是 | canvas绘图上下文,声明范式需提前声明CanvasRenderingContext2D。 |
- | render | string | 是 | 渲染类型,仅支持“canvas”。 |
- | loop | boolean \| number | 否 | 动画播放结束后,是否循环播放,默认值true。值类型为number,且大于等于1时为设置的重复播放的次数。 |
- | autoplay | boolean | 否 | 是否自动播放动画,默认值true。 |
- | name | string | 否 | 开发者自定义的动画名称,后续支持通过该名称引用控制动画,默认为空。 |
- | initialSegment | [number, number] | 否 | 指定动画播放的起始帧号,指定动画播放的结束帧号。 |
+| 参数 | 类型 | 必填 | 描述 |
+| -------------- | --------------------------- | ---- | ---------------------------------------- |
+| path | string | 是 | hap包内动画资源文件路径,仅支持json格式。示例:path: "common/lottie/data.json" |
+| container | object | 是 | canvas绘图上下文,声明范式需提前声明CanvasRenderingContext2D。 |
+| render | string | 是 | 渲染类型,仅支持“canvas”。 |
+| loop | boolean \| number | 否 | 动画播放结束后,是否循环播放,默认值true。值类型为number,且大于等于1时为设置的重复播放的次数。 |
+| autoplay | boolean | 否 | 是否自动播放动画,默认值true。 |
+| name | string | 否 | 开发者自定义的动画名称,后续支持通过该名称引用控制动画,默认为空。 |
+| initialSegment | [number, number] | 否 | 指定动画播放的起始帧号,指定动画播放的结束帧号。 |
## lottie.destroy
@@ -50,9 +50,9 @@ destroy(name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | ---------------------------------------- |
- | name | string | 是 | 被指定的动画名,同loadAnimation接口参数name, 缺省时销毁所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | 是 | 被指定的动画名,同loadAnimation接口参数name, 缺省时销毁所有动画。 |
**示例:**
```ts
@@ -78,7 +78,7 @@ destroy(name: string): void
.width('30%')
.height('20%')
.backgroundColor('#0D9FFB')
- .onAppear(() => {
+ .onReady(() => {
console.log('canvas onAppear');
this.animateItem = lottie.loadAnimation({
container: this.controller,
@@ -131,9 +131,9 @@ play(name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | ---------------------------------------- |
- | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name,缺省时播放所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name,缺省时播放所有动画。 |
**示例:**
@@ -150,9 +150,9 @@ pause(name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | ---------------------------------------- |
- | name | string | 是 | 被指定的动画名,同loadAnimation接口入参name,缺省时暂停所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | 是 | 被指定的动画名,同loadAnimation接口入参name,缺省时暂停所有动画。 |
**示例:**
@@ -169,9 +169,9 @@ togglePause(name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | ---------------------------------------- |
- | name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时停止所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时停止所有动画。 |
**示例:**
@@ -188,9 +188,9 @@ stop(name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | ---------------------------------------- |
- | name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时停止所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时停止所有动画。 |
**示例:**
@@ -207,10 +207,10 @@ setSpeed(speed: number, name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ----- | ------ | ---- | ---------------------------------------- |
- | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 |
- | name | string | 是 | 被指定的动画,同loadAnimation接口参数name,缺省时停止所有动画。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ----- | ------ | ---- | ---------------------------------------- |
+| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 |
+| name | string | 是 | 被指定的动画,同loadAnimation接口参数name,缺省时停止所有动画。 |
**示例:**
@@ -227,10 +227,10 @@ setDirection(direction: AnimationDirection, name: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | --------- | ------------------ | ---- | ---------------------------------------- |
- | direction | AnimationDirection | 是 | 1为正向,-1为反向; 当设置为反向时,从当前播放进度开始回播直到首帧,loop值为true时可无限倒放;speed<0叠加时也是倒放。
AnimationDirection:1 \| -1 |
- | name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时设置所有动画方向。 |
+| 参数 | 类型 | 必填 | 描述 |
+| --------- | ------------------ | ---- | ---------------------------------------- |
+| direction | AnimationDirection | 是 | 1为正向,-1为反向; 当设置为反向时,从当前播放进度开始回播直到首帧,loop值为true时可无限倒放;speed<0叠加时也是倒放。
AnimationDirection:1 \| -1 |
+| name | string | 是 | 被指定的动画名,同loadAnimation接口参数name,缺省时设置所有动画方向。 |
**示例:**
@@ -275,9 +275,9 @@ play(name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | --------------- |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | --------------- |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -294,9 +294,9 @@ destroy(name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | --------------- |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | --------------- |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -313,9 +313,9 @@ pause(name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | --------------- |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | --------------- |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -332,9 +332,9 @@ togglePause(name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | --------------- |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | --------------- |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -351,9 +351,9 @@ stop(name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------ | ---- | --------------- |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------ | ---- | --------------- |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -370,9 +370,9 @@ setSpeed(speed: number): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ----- | ------ | ---- | ---------------------------------------- |
- | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ----- | ------ | ---- | ---------------------------------------- |
+| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 |
**示例:**
@@ -389,9 +389,9 @@ setDirection(direction: AnimationDirection): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | --------- | ------------------ | ---- | ---------------------------------------- |
- | direction | AnimationDirection | 是 | 1为正向,-1为反向; 当设置为反向时,从当前播放进度开始回播直到首帧,loop值为true时可无限倒放;speed<0叠加时也是倒放。
AnimationDirection:1 \| -1。 |
+| 参数 | 类型 | 必填 | 描述 |
+| --------- | ------------------ | ---- | ---------------------------------------- |
+| direction | AnimationDirection | 是 | 1为正向,-1为反向; 当设置为反向时,从当前播放进度开始回播直到首帧,loop值为true时可无限倒放;speed<0叠加时也是倒放。
AnimationDirection:1 \| -1。 |
**示例:**
@@ -408,11 +408,11 @@ goToAndStop(value: number, isFrame?: boolean): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ------- | ------- | ---- | ---------------------------------------- |
- | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 |
- | isFrame | boolean | 否 | true: 按指定帧控制,false:按指定时间控制,缺省默认false。 |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ------- | ------- | ---- | ---------------------------------------- |
+| value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 |
+| isFrame | boolean | 否 | true: 按指定帧控制,false:按指定时间控制,缺省默认false。 |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -432,11 +432,11 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ------- | ------- | ---- | ---------------------------------------- |
- | value | number | 是 | 帧号(值大于等于0)或时间进度(ms) |
- | isFrame | boolean | 是 | true:按指定帧控制, false:按指定时间控制,缺省默认false。 |
- | name | string | 否 | 被指定的动画名,缺省默认为空。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ------- | ------- | ---- | ---------------------------------------- |
+| value | number | 是 | 帧号(值大于等于0)或时间进度(ms) |
+| isFrame | boolean | 是 | true:按指定帧控制, false:按指定时间控制,缺省默认false。 |
+| name | string | 否 | 被指定的动画名,缺省默认为空。 |
**示例:**
@@ -456,10 +456,10 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
- | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表;
如果片段列表全部播放完毕后,下轮循环播放仅播放最后一个片段 |
- | forceFlag | boolean | 是 | true:即时生效播放,false:延迟到下轮循环播放再生效 |
+| 参数 | 类型 | 必填 | 描述 |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表;
如果片段列表全部播放完毕后,下轮循环播放仅播放最后一个片段 |
+| forceFlag | boolean | 是 | true:即时生效播放,false:延迟到下轮循环播放再生效 |
**示例:**
@@ -479,9 +479,9 @@ resetSegments(forceFlag: boolean): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | --------- | ------- | ---- | ------------------------------ |
- | forceFlag | boolean | 是 | true:即时生效播放,false:延迟到下轮循环播放再生效 |
+| 参数 | 类型 | 必填 | 描述 |
+| --------- | ------- | ---- | ------------------------------ |
+| forceFlag | boolean | 是 | true:即时生效播放,false:延迟到下轮循环播放再生效 |
**示例:**
@@ -511,9 +511,9 @@ setSubframe(useSubFrame: boolean): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ------------ | ------- | ---- | ---------------------------------------- |
- | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数,该接口参数将影响currentFrame属性的精度。
true:属性currentFrame显示浮点。
false:属性currentFrame去浮点数显示整数。 |
+| 参数 | 类型 | 必填 | 描述 |
+| ------------ | ------- | ---- | ---------------------------------------- |
+| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数,该接口参数将影响currentFrame属性的精度。
true:属性currentFrame显示浮点。
false:属性currentFrame去浮点数显示整数。 |
**示例:**
@@ -530,9 +530,9 @@ getDuration(inFrames?: boolean): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | -------- | ------- | ---- | ---------------------------------------- |
- | inFrames | boolean | 否 | true:获取帧数, false:获取时间(单位ms),缺省默认false。 |
+| 参数 | 类型 | 必填 | 描述 |
+| -------- | ------- | ---- | ---------------------------------------- |
+| inFrames | boolean | 否 | true:获取帧数, false:获取时间(单位ms),缺省默认false。 |
**示例:**
@@ -549,10 +549,10 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | -------- | ------------------------------- | ---- | ---------------------------------------- |
- | name | AnimationEventName | 是 | 指定动画事件类型,Lottie内置动画事件类型AnimationEventName:
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
- | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 |
+| 参数 | 类型 | 必填 | 描述 |
+| -------- | ------------------------------- | ---- | ---------------------------------------- |
+| name | AnimationEventName | 是 | 指定动画事件类型,Lottie内置动画事件类型AnimationEventName:
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
+| callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 |
**示例:**
@@ -575,10 +575,10 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | -------- | ------------------------------- | ---- | ---------------------------------------- |
- | name | AnimationEventName | 是 | 指定动画事件类型,Lottie内置动画事件类型AnimationEventName:
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
- | callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数;缺省为空时,删除此事件的所有回调函数。 |
+| 参数 | 类型 | 必填 | 描述 |
+| -------- | ------------------------------- | ---- | ---------------------------------------- |
+| name | AnimationEventName | 是 | 指定动画事件类型,Lottie内置动画事件类型AnimationEventName:
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
+| callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数;缺省为空时,删除此事件的所有回调函数。 |
**示例:**
@@ -595,10 +595,10 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void
**参数:**
- | 参数 | 类型 | 必填 | 描述 |
- | ---- | ------------------ | ---- | --------- |
- | name | AnimationEventName | 是 | 指定动画事件类型 |
- | args | any | 是 | 用户自定义回调参数 |
+| 参数 | 类型 | 必填 | 描述 |
+| ---- | ------------------ | ---- | --------- |
+| name | AnimationEventName | 是 | 指定动画事件类型 |
+| args | any | 是 | 用户自定义回调参数 |
**示例:**
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
index f8fc0b4ad9a90f363be6e7d26701ea6b697895df..34342bef756369527367d85e11077db6fae4cf73 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -66,7 +66,7 @@ Grid只展示固定行列数的元素,其余元素不展示,且Grid不可滚
## GridDirection8+枚举说明
| 名称 | 描述 |
- | ------ | -------------------------------------- |
+| ------ | -------------------------------------- |
| Row | 主轴布局方向沿水平方向布局,即自左往右先填满一行,再去填下一行。 |
| Column | 主轴布局方向沿垂直方向布局,即自上往下先填满一列,再去填下一列。 |
| RowReverse | 主轴布局方向沿水平方向反向布局,即自右往左先填满一行,再去填下一行。 |
@@ -100,6 +100,7 @@ Grid只展示固定行列数的元素,其余元素不展示,且Grid不可滚
@Component
struct GridExample {
@State Number: String[] = ['0', '1', '2', '3', '4']
+ scroller: Scroller = new Scroller()
build() {
Column({ space: 5 }) {
@@ -126,7 +127,7 @@ struct GridExample {
.height(300)
Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
- Grid() {
+ Grid(this.scroller) {
ForEach(this.Number, (day: string) => {
ForEach(this.Number, (day: string) => {
GridItem() {
@@ -149,6 +150,10 @@ struct GridExample {
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
+ Button('next page')
+ .onClick(() => { // 点击后滑到下一页
+ this.scroller.scrollPage({ next: true })
+ })
}.width('100%').margin({ top: 5 })
}
}
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index e9a0cd9f65503c3a52ad4a967d241c403837b797..adb197b0bff707b0f237933e1b48e21689e1154a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -11,7 +11,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
-| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**说明:**
path中支持使用start和end进行起点和终点的替代,如:
'Mstart.x start.y L50 50 Lend.x end.y Z'| {
'',
0.0,
1.0,
false
} | 设置组件的运动路径,入参说明如下:
- path:位移动画的运动路径,使用svg路径字符串。
- from:运动路径的起点,默认为0.0。
- to:运动路径的终点,默认为1.0。
- rotatable:是否跟随路径进行旋转。 |
+| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**说明:**
path中支持使用start和end进行起点和终点的替代,如:
'Mstart.x start.y L50 50 Lend.x end.y Z',更多说明请参考[绘制路径](../../ui/ui-js-components-svg-path.md)。 | {
'',
0.0,
1.0,
false
} | 设置组件的运动路径,入参说明如下:
- path:位移动画的运动路径,使用svg路径字符串。
- from:运动路径的起点,默认为0.0。
- to:运动路径的终点,默认为1.0。
- rotatable:是否跟随路径进行旋转。 |
## 示例
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
index da8af9d48ef6997675a1933f68725ad0ac5847b5..fb10ce9cc1a0dacdd5b28ccdc97a728435f005b2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
@@ -5,20 +5,21 @@
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
+>
| 名称 | 参数 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| PageTransitionEnter | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | 设置当前页面的自定义入场动效。
- type:不配置时表明pop为push时效果的逆播。
- duration:动画的时长,单位为毫秒。
- curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。
默认值:Curve.Linear
- delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
-| PageTransitionExit | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | 设置当前页面的自定义退场动效。
- type:不配置时表明pop为push时效果的逆播
- duration:动画的时长,单位为毫秒。
- curve:动画曲线,string类型取值与PageTransitionEnter相同。
默认值:Curve.Linear
- delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
+| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | 设置当前页面的自定义入场动效。
- type:页面转场效果生效的路由类型。
默认值:RouteType.None。
**说明:**没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。
- duration:动画的时长,单位为毫秒。
- curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。
默认值:Curve.Linear
- delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
+| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | 设置当前页面的自定义退场动效。
- type:页面转场效果生效的路由类型。
默认值:RouteType.None。
**说明:**没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。
- duration:动画的时长,单位为毫秒。
- curve:动画曲线,string类型取值与PageTransitionEnter相同。
默认值:Curve.Linear
- delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
## RouteType枚举说明
| 名称 | 描述 |
| ---- | ------------------------------------------------------------ |
-| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
-| Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
-| None | 页面未重定向。 |
+| Pop | 重定向指定页面。从PageB回退到之前的页面PageA。对于PageB,指定RouteType为None或者Pop的PageTransitionExit组件样式生效,对于PageA,指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。 |
+| Push | 跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA,指定RouteType为None或者Push的PageTransitionExit组件样式生效,对于PageB,指定RouteType为None或者Push的PageTransitionEnter组件样式生效。 |
+| None | 页面未重定向。如Push和Pop描述中RouteType为None的情形,即页面进场时PageTransitionEnter的转场效果生效;退场时PageTransitionExit的转场效果生效。 |
## 属性
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
index e915efdd2c514a9a015f19d6b5060cfb37e30412..4c1606fddcb6cb2e24e2830009a16fcccaba6644 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
@@ -11,7 +11,7 @@
| **名称** | **参数类型** | **描述** |
| -------------------- | -------- | ---------------------------------------- |
-| focusable | boolean | 设置当前组件是否可以获焦。
**说明:**
存在默认交互逻辑的组件例如Button、TextInput等,默认即为可获焦,Text、Image等组件则默认状态为不可获焦。 |
+| focusable | boolean | 设置当前组件是否可以获焦。
**说明:**
存在默认交互逻辑的组件例如Button、TextInput等,默认即为可获焦,Text、Image等组件则默认状态为不可获焦。不可获焦状态下,无法触发[焦点事件](ts-universal-focus-event.md)。 |
| tabIndex9+ | number | 自定义组件tab键走焦能力,走焦顺序为:tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0:表示元素是可聚焦的,并且可以通过tab键走焦来访问到该元素,tabIndex值越小,则优先获焦;反之,则后获焦。如果多个元素拥有相同的tabIndex,按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0(通常是tabIndex = -1):表示元素是可聚焦的,但是不能通过tab键走焦来访问到该元素。
默认值:0 |
| defaultFocus9+ | boolean | 设置当前组件是否为当前页面上的默认焦点,仅在初次创建的页面第一次进入时生效。
默认值:false |
| groupDefaultFocus9+ | boolean | 设置当前组件是否为当前组件所在容器获焦时的默认焦点,仅在初次创建容器节点第一次获焦时生效。
默认值:false
**说明:** 必须与tabIndex联合使用,当某个容器设置了tabIndex,且容器内某子组件设置了groupDefaultFocus,当该容器首次获焦时,会自动将焦点转移至该组件上。
|