Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 165494a0 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!23560 ArkTS示例代码修改 

Merge pull request !23560 from 椎名真昼/master
上级 a77d7f77 ad727cfa
隐藏空白更改
内联 并排
Showing with 455 addition and 224 deletion
zh-cn/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 165494a0
......@@ -55,21 +55,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.pushUrl<sup>9+</sup>
......@@ -100,14 +113,27 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): 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}`);
......@@ -150,21 +176,34 @@ pushUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
**示例：**
```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.pushUrl<sup>9+</sup>
......@@ -196,14 +235,27 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;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}`);
......@@ -245,18 +297,24 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt;
**示例：**
```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.replaceUrl<sup>9+</sup>
......@@ -286,11 +344,17 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): 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}`);
......@@ -334,18 +398,24 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
**示例：**
```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.replaceUrl<sup>9+</sup>
......@@ -376,11 +446,17 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;
**示例：**
```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}`);
......@@ -424,21 +500,34 @@ pushNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
**示例：**
```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#命名路由)
......@@ -471,14 +560,27 @@ pushNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;void&gt;)
**示例：**
```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}`);
......@@ -521,21 +623,34 @@ pushNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;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.pushNamedRoute<sup>10+</sup>
......@@ -567,14 +682,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}`);
......@@ -616,18 +744,24 @@ replaceNamedRoute(options: NamedRouterOptions): Promise&lt;void&gt;
**示例：**
```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.replaceNamedRoute<sup>10+</sup>
......@@ -657,11 +791,17 @@ replaceNamedRoute(options: NamedRouterOptions, callback: AsyncCallback&lt;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}`);
......@@ -705,18 +845,24 @@ replaceNamedRoute(options: NamedRouterOptions, mode: RouterMode): Promise&lt;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.replaceNamedRoute<sup>10+</sup>
......@@ -747,11 +893,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}`);
......@@ -877,15 +1029,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
......@@ -999,6 +1151,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
......@@ -1006,17 +1178,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}`)
}
}
......@@ -1046,12 +1213,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() {
......@@ -1096,14 +1281,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])
});
```
......@@ -1126,11 +1324,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')
});
```
......
zh-cn/application-dev/ui/arkts-performance-improvement-recommendation.md
浏览文件 @ 165494a0
......@@ -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<number>(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]
}
......
zh-cn/application-dev/ui/arkts-popup-and-menu-components-menu.md
浏览文件 @ 165494a0
......@@ -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({
......
zh-cn/application-dev/ui/arkts-routing.md
浏览文件 @ 165494a0
......@@ -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}`);
}
})
}
......
zh-cn/application-dev/ui/arkts-shared-element-transition.md
浏览文件 @ 165494a0
......@@ -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<number> = [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;
......
zh-cn/application-dev/ui/arkts-spring-curve.md
浏览文件 @ 165494a0
......@@ -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() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或