未验证 提交 ea056f8e 编写于 作者: O openharmony_ci 提交者: Gitee

!7962 翻译完成 7670:refresh组件的refreshing参数新增$$

Merge pull request !7962 from ester.zhou/TR-7670
...@@ -22,7 +22,7 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | stri ...@@ -22,7 +22,7 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | stri
| Name| Value Type| Mandatory| Default Value| Description| | Name| Value Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| - | Whether the current component is being refreshed.| | refreshing | boolean | Yes| - | Whether the current component is being refreshed.<br/>This parameter can be used with [$$](../../ui/ts-syntactic-sugar.md) for two-way binding of variables. |
| offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.| | offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| friction | number&nbsp;\|&nbsp;string | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.| | friction | number&nbsp;\|&nbsp;string | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
...@@ -59,7 +59,7 @@ struct RefreshExample { ...@@ -59,7 +59,7 @@ struct RefreshExample {
build() { build() {
Column() { Column() {
Refresh({refreshing: this.isRefreshing, offset: 120, friction: 100}) { Refresh({refreshing: $$this.isRefreshing, offset: 120, friction: 100}) {
Text('Pull Down and refresh: ' + this.counter) Text('Pull Down and refresh: ' + this.counter)
.fontSize(30) .fontSize(30)
.margin(10) .margin(10)
......
...@@ -8,7 +8,7 @@ A decorator @Decorator can decorate a class, structure, or class attribute. Mult ...@@ -8,7 +8,7 @@ A decorator @Decorator can decorate a class, structure, or class attribute. Mult
In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states. In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
``` ```ts
@Component @Component
struct MyComponent { struct MyComponent {
@State count: number = 0 @State count: number = 0
...@@ -18,7 +18,7 @@ struct MyComponent { ...@@ -18,7 +18,7 @@ struct MyComponent {
Multiple decorators can be defined on a single line, as shown below: Multiple decorators can be defined on a single line, as shown below:
``` ```ts
@Entry @Component struct MyComponent { @Entry @Component struct MyComponent {
} }
``` ```
...@@ -26,7 +26,7 @@ Multiple decorators can be defined on a single line, as shown below: ...@@ -26,7 +26,7 @@ Multiple decorators can be defined on a single line, as shown below:
However, you are advised to define the decorators on multiple lines, as shown below: However, you are advised to define the decorators on multiple lines, as shown below:
``` ```ts
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -36,7 +36,7 @@ struct MyComponent { ...@@ -36,7 +36,7 @@ struct MyComponent {
### Supported Decorators ### Supported Decorators
| Decorator | Decorates... | Description | | Decorator | Decorates... | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. | | @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. | | @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
...@@ -56,10 +56,9 @@ struct MyComponent { ...@@ -56,10 +56,9 @@ struct MyComponent {
## Chain Call ## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call. You can configure the UI structure and its attributes and events and separate them with a dot (.) to implement chain call.
```ts
```
Column() { Column() {
Image('1.jpg') Image('1.jpg')
.alt('error.jpg') .alt('error.jpg')
...@@ -73,8 +72,7 @@ Column() { ...@@ -73,8 +72,7 @@ Column() {
Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components. Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
```ts
```
@Component @Component
struct MyComponent { struct MyComponent {
@State data: string = '' @State data: string = ''
...@@ -87,10 +85,10 @@ struct MyComponent { ...@@ -87,10 +85,10 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword ## Instantiating a struct Without the new Keyword
You can omit the new keyword when instantiating a struct. You can omit the **new** keyword when instantiating a struct.
``` ```ts
// Definition // Definition
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -114,7 +112,7 @@ new Column() { ...@@ -114,7 +112,7 @@ new Column() {
TypeScript has the following restrictions on generators: TypeScript has the following restrictions on generators:
- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters. - Expressions can be used only in character strings (**${expression}**), if conditions, ForEach parameters, and component parameters.
- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur. - No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
...@@ -125,11 +123,11 @@ None of the above restrictions apply to anonymous function implementations of ev ...@@ -125,11 +123,11 @@ None of the above restrictions apply to anonymous function implementations of ev
Incorrect: Incorrect:
``` ```ts
build() { build() {
let a: number = 1 // invalid: variable declaration not allowed let a: number = 1 // invalid: variable declaration not allowed
Column() { Column() {
Text('Hello ${this.myName.toUpperCase()}') // ok. Text(`Hello ${this.myName.toUpperCase()}`) // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
} }
buildSpecial() // invalid: no function calls buildSpecial() // invalid: no function calls
...@@ -137,13 +135,15 @@ build() { ...@@ -137,13 +135,15 @@ build() {
} }
``` ```
## $$ ## Two-Way Binding of Variables
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables. $$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component. Currently, $$ supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the @State decorated variable, the **checked** attribute of the **\<Radio>** component, and the **refreshing** parameter of the **\<Refresh>** component.
```
```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct bindPopup { struct bindPopup {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册