Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 3d3ecfa7 编写于 作者: Y yamila
浏览文件
操作

update routeType 

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