diff --git a/zh-cn/application-dev/reference/apis/js-apis-router.md b/zh-cn/application-dev/reference/apis/js-apis-router.md index 2fe66cd47c4495af133e25c182deca37b81ec9e8..cad30743bc693cda8bfa69055c426913cb681727 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-router.md +++ b/zh-cn/application-dev/reference/apis/js-apis-router.md @@ -53,21 +53,34 @@ pushUrl(options: RouterOptions): Promise<void> **示例：** ```ts -router.pushUrl({ - url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +import { BusinessError } from '@ohos.base'; + +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple } -}) - .then(() => { - // success - }) - .catch(err => { - console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + +try { + router.pushUrl({ + url: 'pages/routerpage2', + params: new routerParams('message' ,[123,456,789]) }) +} catch (err) { + console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.pushUrl9+ @@ -98,14 +111,27 @@ pushUrl(options: RouterOptions, callback: AsyncCallback<void>): void **示例：** ```ts +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple + } +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + router.pushUrl({ url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message' ,[123,456,789]) }, (err) => { if (err) { console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); @@ -148,21 +174,34 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise<void> **示例：** ```ts -router.pushUrl({ - url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +import { BusinessError } from '@ohos.base'; + +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple } -}, router.RouterMode.Standard) - .then(() => { - // success - }) - .catch(err => { - console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); - }) +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + +try { + router.pushUrl({ + url: 'pages/routerpage2', + params: new routerParams('message' ,[123,456,789]) + }, router.RouterMode.Standard) +} catch (err) { + console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.pushUrl9+ @@ -194,14 +233,27 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback<voi **示例：** ```ts +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple + } +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + router.pushUrl({ url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message' ,[123,456,789]) }, router.RouterMode.Standard, (err) => { if (err) { console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); @@ -243,18 +295,24 @@ replaceUrl(options: RouterOptions): Promise<void> **示例：** ```ts -router.replaceUrl({ - url: 'pages/detail', - params: { - data1: 'message' +import { BusinessError } from '@ohos.base'; + +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str } -}) - .then(() => { - // success - }) - .catch(err => { - console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); +} + +try { + router.replaceUrl({ + url: 'pages/detail', + params: new routerParams('message') }) +} catch (err) { + console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.replaceUrl9+ @@ -284,11 +342,17 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback<void>): void **示例：** ```ts +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str + } +} + router.replaceUrl({ url: 'pages/detail', - params: { - data1: 'message' - } + params: new routerParams('message') }, (err) => { if (err) { console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); @@ -332,18 +396,24 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise<void> **示例：** ```ts -router.replaceUrl({ - url: 'pages/detail', - params: { - data1: 'message' +import { BusinessError } from '@ohos.base'; + +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str } -}, router.RouterMode.Standard) - .then(() => { - // success - }) - .catch(err => { - console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); - }) +} + +try { + router.replaceUrl({ + url: 'pages/detail', + params: new routerParams('message') + }, router.RouterMode.Standard) +} catch (err) { + console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.replaceUrl9+ @@ -374,11 +444,17 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback< **示例：** ```ts +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str + } +} + router.replaceUrl({ url: 'pages/detail', - params: { - data1: 'message' - } + params: new routerParams('message') }, router.RouterMode.Standard, (err) => { if (err) { console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); @@ -422,21 +498,34 @@ pushNamedRoute(options: NamedRouterOptions): Promise<void> **示例：** ```ts -router.pushNamedRoute({ - name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +import { BusinessError } from '@ohos.base'; + +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple } -}) - .then(() => { - // success - }) - .catch(err => { - console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + +try { + router.pushNamedRoute({ + name: 'myPage', + params: new routerParams('message' ,[123,456,789]) }) +} catch (err) { + console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` 详细示例请参考：[UI开发-页面路由](../../ui/arkts-routing.md#命名路由) @@ -469,14 +558,27 @@ pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback<void>) **示例：** ```ts +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple + } +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + router.pushNamedRoute({ name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message' ,[123,456,789]) }, (err) => { if (err) { console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); @@ -519,21 +621,34 @@ pushNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise<void&g **示例：** ```ts -router.pushNamedRoute({ - name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } +import { BusinessError } from '@ohos.base'; + +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple } -}, router.RouterMode.Standard) - .then(() => { - // success - }) - .catch(err => { - console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); - }) +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + +try { + router.pushNamedRoute({ + name: 'myPage', + params: new routerParams('message' ,[123,456,789]) + }, router.RouterMode.Standard) +} catch (err) { + console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.pushNamedRoute10+ @@ -565,14 +680,27 @@ pushNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: AsyncCal **示例：** ```ts +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple + } +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + router.pushNamedRoute({ name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message' ,[123,456,789]) }, router.RouterMode.Standard, (err) => { if (err) { console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); @@ -614,18 +742,24 @@ replaceNamedRoute(options: NamedRouterOptions): Promise<void> **示例：** ```ts -router.replaceNamedRoute({ - name: 'myPage', - params: { - data1: 'message' +import { BusinessError } from '@ohos.base'; + +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str } -}) - .then(() => { - // success - }) - .catch(err => { - console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); +} + +try { + router.replaceNamedRoute({ + name: 'myPage', + params: new routerParams('message') }) +} catch (err) { + console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.replaceNamedRoute10+ @@ -655,11 +789,17 @@ replaceNamedRoute(options: NamedRouterOptions, callback: AsyncCallback<void&g **示例：** ```ts +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str + } +} + router.replaceNamedRoute({ name: 'myPage', - params: { - data1: 'message' - } + params: new routerParams('message') }, (err) => { if (err) { console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); @@ -703,18 +843,24 @@ replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise<voi **示例：** ```ts -router.replaceNamedRoute({ - name: 'myPage', - params: { - data1: 'message' +import { BusinessError } from '@ohos.base'; + +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str } -}, router.RouterMode.Standard) - .then(() => { - // success - }) - .catch(err => { - console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); - }) +} + +try { + router.replaceNamedRoute({ + name: 'myPage', + params: new routerParams('message') + }, router.RouterMode.Standard) +} catch (err) { + console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## router.replaceNamedRoute10+ @@ -745,11 +891,17 @@ replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode, callback: Async **示例：** ```ts +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str + } +} + router.replaceNamedRoute({ name: 'myPage', - params: { - data1: 'message' - } + params: new routerParams('message') }, router.RouterMode.Standard, (err) => { if (err) { console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); @@ -875,15 +1027,15 @@ showAlertBeforeBackPage(options: EnableAlertOptions): void **示例：** ```ts -router.showAlertBeforeBackPage({ - message: 'Message Info' -}) - .then(() => { - // success - }) - .catch(err => { - console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`); - }) +import { BusinessError } from '@ohos.base'; + +try { + router.showAlertBeforeBackPage({ + message: 'Message Info' + }); +} catch(err) { + console.error(`showAlertBeforeBackPage failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); +} ``` ## EnableAlertOptions @@ -997,6 +1149,26 @@ export default { ```ts // 通过router.pushUrl跳转至目标页携带params参数 import router from '@ohos.router' +import { BusinessError } from '@ohos.base' + +// 定义传递参数的类 +class innerParams { + array:number[] + + constructor(tuple:number[]) { + this.array = tuple + } +} + +class routerParams { + text:string + data:innerParams + + constructor(str:string, tuple:number[]) { + this.text = str + this.data = new innerParams(tuple) + } +} @Entry @Component @@ -1004,17 +1176,12 @@ struct Index { async routePage() { let options = { url: 'pages/second', - params: { - text: '这是第一页的值', - data: { - array: [12, 45, 78] - } - } + params: new routerParams('这是第一页的值' ,[12, 45, 78]) } try { await router.pushUrl(options) } catch (err) { - console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`) + console.info(` fail callback, code: ${(err as BusinessError).code}, msg: ${(err as BusinessError).msg}`) } } @@ -1044,12 +1211,30 @@ struct Index { // 在second页面中接收传递过来的参数 import router from '@ohos.router' +class innerParams { + array:number[] + + constructor(tuple:number[]) { + this.array = tuple + } +} + +class routerParams { + text:string + data:innerParams + + constructor(str:string, tuple:number[]) { + this.text = str + this.data = new innerParams(tuple) + } +} + @Entry @Component struct Second { private content: string = "这是第二页" - @State text: string = router.getParams()['text'] - @State data: object = router.getParams()['data'] + @State text: string = (router.getParams() as routerParams).text + @State data: object = (router.getParams() as routerParams).data @State secondData: string = '' build() { @@ -1094,14 +1279,27 @@ push(options: RouterOptions): void **示例：** ```ts +class innerParams { + data3:number[] + + constructor(tuple:number[]) { + this.data3 = tuple + } +} + +class routerParams { + data1:string + data2:innerParams + + constructor(str:string, tuple:number[]) { + this.data1 = str + this.data2 = new innerParams(tuple) + } +} + router.push({ url: 'pages/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message' ,[123,456,789]) }); ``` @@ -1124,11 +1322,17 @@ replace(options: RouterOptions): void **示例：** ```ts +class routerParams { + data1:string + + constructor(str:string) { + this.data1 = str + } +} + router.replace({ url: 'pages/detail', - params: { - data1: 'message' - } + params: new routerParams('message') }); ``` diff --git a/zh-cn/application-dev/ui/arkts-performance-improvement-recommendation.md b/zh-cn/application-dev/ui/arkts-performance-improvement-recommendation.md index 82590267d36c3cbb313689b936e5326db68dfa39..125df551572bdd58894e1c41345ee598773ff85d 100644 --- a/zh-cn/application-dev/ui/arkts-performance-improvement-recommendation.md +++ b/zh-cn/application-dev/ui/arkts-performance-improvement-recommendation.md @@ -10,7 +10,7 @@ @Entry @Component struct MyComponent { - @State arr: number[] = Array.from(Array(100), (v,k) =>k); //构造0-99的数组 + @State arr: number[] = Array.from(Array(100), (v,k) =>k); //构造0-99的数组 build() { List() { ForEach(this.arr, (item: number) => { @@ -33,8 +33,8 @@ class BasicDataSource implements IDataSource { return 0 } - public getData(index: number): any { - return undefined + public getData(index: number): string { + return '' } registerDataChangeListener(listener: DataChangeListener): void { @@ -90,7 +90,7 @@ class MyDataSource extends BasicDataSource { return this.dataArray.length } - public getData(index: number): any { + public getData(index: number): string { return this.dataArray[index] } @@ -121,7 +121,7 @@ struct MyComponent { .onClick(() => { this.data.pushData('item value: ' + this.data.totalCount()) }) - }, item => item) + }, (item:string) => item) } } } @@ -155,8 +155,8 @@ class BasicDataSource implements IDataSource { return 0 } - public getData(index: number): any { - return undefined + public getData(index: number): string { + return '' } registerDataChangeListener(listener: DataChangeListener): void { @@ -212,7 +212,7 @@ class MyDataSource extends BasicDataSource { return this.dataArray.length } - public getData(index: number): any { + public getData(index: number): string { return this.dataArray[index] } @@ -235,10 +235,10 @@ struct MyComponent { build() { Scroll() { List() { - LazyForEach(this.data, (item: string, index: number) => { + LazyForEach(this.data, (item: string, index?: number) => { ListItem() { Row() { - Text('item value: ' + item + (index + 1)).fontSize(20).margin(10) + Text('item value: ' + item + (index as number + 1)).fontSize(20).margin(10) } } }) @@ -258,8 +258,8 @@ class BasicDataSource implements IDataSource { return 0 } - public getData(index: number): any { - return undefined + public getData(index: number): string { + return '' } registerDataChangeListener(listener: DataChangeListener): void { @@ -315,7 +315,7 @@ class MyDataSource extends BasicDataSource { return this.dataArray.length } - public getData(index: number): any { + public getData(index: number): string { return this.dataArray[index] } @@ -338,9 +338,9 @@ struct MyComponent { build() { Scroll() { List() { - LazyForEach(this.data, (item: string, index: number) => { + LazyForEach(this.data, (item: string, index?: number) => { ListItem() { - Text('item value: ' + item + (index + 1)).fontSize(20).margin(10) + Text('item value: ' + item + (index as number + 1)).fontSize(20).margin(10) }.width('100%') }) }.width('100%').height(500) @@ -453,7 +453,7 @@ struct MyComponent { build() { List() { - LazyForEach(this.source, item => { + LazyForEach(this.source, (item:number) => { ListItem() { Text("Hello" + item) .fontSize(50) @@ -473,7 +473,7 @@ class MyDataSource implements IDataSource { return this.data.length } - public getData(index: number): any { + public getData(index: number): number { return this.data[index] } diff --git a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md index c51650dcda1b999dc0abc92b48d22493ffe45ac6..7fa83be382824b7cdb7b37e184b54976bd44ea84 100644 --- a/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md +++ b/zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md @@ -56,7 +56,7 @@ MyMenu(){ content: "菜单选项", endIcon: $r("app.media.arrow_right_filled"), // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。 - builder: this.SubMenu.bind(this), + builder: this.SubMenu, }) MenuItemGroup({ header: '小标题' }) { MenuItem({ content: "菜单选项" }) @@ -70,7 +70,7 @@ MyMenu(){ startIcon: $r("app.media.view_list_filled"), content: "菜单选项", endIcon: $r("app.media.arrow_right_filled"), - builder: this.SubMenu.bind(this) + builder: this.SubMenu }) } MenuItem({ diff --git a/zh-cn/application-dev/ui/arkts-routing.md b/zh-cn/application-dev/ui/arkts-routing.md index 0e25937c2d8d6eeb9cadd25ad5e176d193ef6a46..18b752fab132f27b22076b71391ad00e681ca33e 100644 --- a/zh-cn/application-dev/ui/arkts-routing.md +++ b/zh-cn/application-dev/ui/arkts-routing.md @@ -124,21 +124,25 @@ import router from '@ohos.router'; ```ts class DataModelInfo { age: number; + + constructor(age: number) { + this.age = age; + } } class DataModel { id: number; info: DataModelInfo; + + constructor(id: number, info: DataModelInfo) { + this.id = id; + this.info = info; + } } function onJumpClick(): void { // 在Home页面中 - let paramsInfo: DataModel = { - id: 123, - info: { - age: 20 - } - }; + let paramsInfo: DataModel = new DataModel(123, new DataModelInfo(20)); router.pushUrl({ url: 'pages/Detail', // 目标url @@ -157,9 +161,9 @@ function onJumpClick(): void { ```ts -const params = router.getParams(); // 获取传递过来的参数对象 -const id = params['id']; // 获取id属性的值 -const age = params['info'].age; // 获取age属性的值 +const params:DataModel = router.getParams() as DataModel; // 获取传递过来的参数对象 +const id:number = params.id; // 获取id属性的值 +const age:number = params.info.age; // 获取age属性的值 ``` @@ -204,11 +208,17 @@ import router from '@ohos.router'; ```ts + class routerParam { + info: string; + + constructor(info: string) { + this.info = info; + } + } + router.back({ url: 'pages/Home', - params: { - info: '来自Home页' - } + params: new routerParam('来自Home页') }); ``` @@ -219,8 +229,8 @@ import router from '@ohos.router'; ```ts onPageShow() { - const params = router.getParams(); // 获取传递过来的参数对象 - const info = params['info']; // 获取info属性的值 + const params = router.getParams() as routerParam; // 获取传递过来的参数对象 + const info = params.info; // 获取info属性的值 } ``` @@ -257,6 +267,8 @@ import router from '@ohos.router'; ```ts +import {BusinessError} from '@ohos.base'; + // 定义一个返回按钮的点击事件处理函数 function onBackClick(): void { // 调用router.showAlertBeforeBackPage()方法，设置返回询问框的信息 @@ -265,7 +277,7 @@ function onBackClick(): void { message: '您还没有完成支付，确定要返回吗？' // 设置询问框的内容 }); } catch (err) { - console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`); + console.error(`Invoke showAlertBeforeBackPage failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); } // 调用router.back()方法，返回上一个页面 @@ -295,6 +307,9 @@ import router from '@ohos.router'; ```ts +import { BusinessError } from '@ohos.base'; +import promptAction from '@ohos.promptAction'; + function onBackClick() { // 弹出自定义的询问框 promptAction.showDialog({ @@ -319,7 +334,7 @@ function onBackClick() { // 调用router.back()方法，返回上一个页面 router.back(); } - }).catch((err) => { + }).catch((err:BusinessError) => { console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`); }) } @@ -355,6 +370,25 @@ struct MyComponent { // entry/src/main/ets/pages/Index.ets import router from '@ohos.router'; import 'library/src/main/ets/pages/Index' // 引入共享包library中的命名路由页面 +import { BusinessError } from '@ohos.base'; + +class innerParams { + data3: number[]; + + constructor(tuple: number[]) { + this.data3 = tuple; + } +} + +class routerParams { + data1: string; + data2: innerParams; + + constructor(data1: string, data2: number[]) { + this.data1 = data1; + this.data2 = new innerParams(data2); + } +} @Entry @Component @@ -370,15 +404,10 @@ struct Index { try { router.pushNamedRoute({ name: 'myPage', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - } - } + params: new routerParams('message', [123, 456, 789]) }) } catch (err) { - console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); + console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`); } }) } diff --git a/zh-cn/application-dev/ui/arkts-shared-element-transition.md b/zh-cn/application-dev/ui/arkts-shared-element-transition.md index 72ef52a8dbce225354ae7966b533321a63b6f18f..2a4bfeba02a889c7910e38760709b6a20b67f8fa 100644 --- a/zh-cn/application-dev/ui/arkts-shared-element-transition.md +++ b/zh-cn/application-dev/ui/arkts-shared-element-transition.md @@ -86,7 +86,7 @@ export struct share_transition_expand { build() { Column() { List() { - ForEach(this.listArray, (item, index) => { + ForEach(this.listArray, (item:number, index) => { // 根据需要定制展开后的组件 if (!this.isExpand || this.curIndex == index) { ListItem() { @@ -128,7 +128,7 @@ export struct share_transition_expand { .onClick(() => { // 定义展开收起的动画参数 animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { - this.curIndex = index; + this.curIndex = index as number; this.isExpand = !this.isExpand; }) }) @@ -216,12 +216,12 @@ export struct share_zIndex_expand { @Link isExpand: boolean; @Link curIndex: number; @State listArray: Array = [1, 2, 3, 4, 5, 6]; - private parentScroller: Scroller; // 上层滑动组件控制器 + private parentScroller: Scroller = new Scroller(); // 上层滑动组件控制器 build() { Column() { List() { - ForEach(this.listArray, (item, index) => { + ForEach(this.listArray, (item: number, index) => { // 根据需要定制展开后的组件 if (!this.isExpand || this.curIndex == index) { ListItem() { @@ -271,7 +271,7 @@ export struct share_zIndex_expand { .onClick(() => { // 定义展开收起的动画参数 animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { - this.curIndex = index; + this.curIndex = index as number; this.isExpand = !this.isExpand; }) }) @@ -540,7 +540,7 @@ struct AutoAchieveShareTransitionDemo { Stack() { Scroll() { Column({ space: 20 }) { - ForEach(this.items, (item, index) => { + ForEach(this.items, (item:string, index) => { Row() { Column() { Text('共享元素 ' + item) @@ -567,15 +567,7 @@ struct AutoAchieveShareTransitionDemo { .onClick(() => { // 获取对应组件的位置、大小信息 let strJson = getInspectorByKey(item); - let obj = JSON.parse(strJson); - let rectInfo = JSON.parse('[' + obj.$rect + ']'); - let rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]; - let rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]; - let rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]; - let rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]; - let rect_value = { - "left": rect_left, "top": rect_top, "right": rect_right, "bottom": rect_bottom - }; + let rect_top:number = JSON.parse('[' + JSON.parse('[' + JSON.parse(strJson).$rect + ']')[0] + ']')[1]; // 设置共享元素的位置、内容、状态 this.rect_top = rect_top; diff --git a/zh-cn/application-dev/ui/arkts-spring-curve.md b/zh-cn/application-dev/ui/arkts-spring-curve.md index 7bb9e02634696aad84ad9def4769f157fde2af08..8e5ded1556650156420026901101041ac62161f8 100644 --- a/zh-cn/application-dev/ui/arkts-spring-curve.md +++ b/zh-cn/application-dev/ui/arkts-spring-curve.md @@ -68,10 +68,10 @@ class Spring { // 弹簧组件 @Component struct Motion { - @Prop dRotate: number - private title: string - private subTitle: string - private iCurve: ICurve + @Prop dRotate: number = 0 + private title: string = '' + private subTitle: string = '' + private iCurve: ICurve = curves.initCurve() build() { Row() { @@ -134,11 +134,17 @@ struct Motion { @Component export struct SpringDemo { @State dRotate: number = 0; + private curvelist: ICurve[] = [ + curves.springMotion(1, 0.25), + curves.responsiveSpringMotion(1, 0.25), + curves.interpolatingSpring(10, 1, 228, 30), + curves.springCurve(10, 1, 228, 30) + ]; private springs: Spring[] = [ - new Spring('springMotion()', '(springMotion(1, 0.25): \n\n周期2, 阻尼0.25)', curves.springMotion(1, 0.25)), - new Spring('responsiveSpringMotion()', 'responsiveSpringMotion(1, 0.25): \n\n默认弹性跟手曲线', curves.responsiveSpringMotion(1, 0.25)), - new Spring('interpolatingSpring()', '(interpolatingSpring(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', curves.interpolatingSpring(10, 1, 228, 30)), - new Spring('springCurve()', '(springCurve(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', curves.springCurve(10, 1, 228, 30)) + new Spring('springMotion()', '(springMotion(1, 0.25): \n\n周期2, 阻尼0.25)', this.curvelist[0]), + new Spring('responsiveSpringMotion()', 'responsiveSpringMotion(1, 0.25): \n\n默认弹性跟手曲线', this.curvelist[1]), + new Spring('interpolatingSpring()', '(interpolatingSpring(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', this.curvelist[2]), + new Spring('springCurve()', '(springCurve(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', this.curvelist[3]) ]; build() {