Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
5f0ed18f
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
5f0ed18f
编写于
6月 19, 2023
作者:
D
duangavin123
提交者:
Gitee
6月 19, 2023
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of gitee.com:openharmony/docs into master
Signed-off-by:
N
duangavin123
<
duanxichao@huawei.com
>
上级
73ee08e5
8928f34f
变更
15
隐藏空白更改
内联
并排
Showing
15 changed file
with
601 addition
and
95 deletion
+601
-95
zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md
...on-dev/reference/apis/js-apis-arkui-drawableDescriptor.md
+10
-5
zh-cn/application-dev/reference/apis/js-apis-curve.md
zh-cn/application-dev/reference/apis/js-apis-curve.md
+15
-15
zh-cn/application-dev/reference/apis/js-apis-font.md
zh-cn/application-dev/reference/apis/js-apis-font.md
+2
-0
zh-cn/application-dev/reference/apis/js-apis-matrix4.md
zh-cn/application-dev/reference/apis/js-apis-matrix4.md
+98
-68
zh-cn/application-dev/reference/apis/js-apis-measure.md
zh-cn/application-dev/reference/apis/js-apis-measure.md
+1
-1
zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md
...application-dev/reference/apis/js-apis-plugincomponent.md
+15
-1
zh-cn/application-dev/reference/apis/js-apis-system-router.md
...n/application-dev/reference/apis/js-apis-system-router.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
.../application-dev/reference/arkui-ts/ts-container-badge.md
+1
-1
zh-cn/third-party-cases/Readme-CN.md
zh-cn/third-party-cases/Readme-CN.md
+2
-0
zh-cn/third-party-cases/figures/list-pullup-loading.gif
zh-cn/third-party-cases/figures/list-pullup-loading.gif
+0
-0
zh-cn/third-party-cases/figures/screenon.gif
zh-cn/third-party-cases/figures/screenon.gif
+0
-0
zh-cn/third-party-cases/griditem-drag-and-drop.md
zh-cn/third-party-cases/griditem-drag-and-drop.md
+1
-1
zh-cn/third-party-cases/keep-screen-on.md
zh-cn/third-party-cases/keep-screen-on.md
+123
-0
zh-cn/third-party-cases/list-pullup-loading-data.md
zh-cn/third-party-cases/list-pullup-loading-data.md
+330
-0
zh-cn/third-party-cases/listitem-slide-to-display-menu.md
zh-cn/third-party-cases/listitem-slide-to-display-menu.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md
浏览文件 @
5f0ed18f
...
@@ -68,7 +68,8 @@ getPixelMap(): image.PixelMap;
...
@@ -68,7 +68,8 @@ getPixelMap(): image.PixelMap;
**示例:**
**示例:**
```
ts
```
ts
pixmap
:
PixelMap
=
drawable1
.
getPixelMap
();
pixmap
:
PixelMap
=
(
<
DrawableDescriptor
>
(
this
.
resManager
.
getDrawableDescriptor
(
$r
(
'
app.media.icon
'
)
.
id
))).
getPixelMap
();
```
```
## LayeredDrawableDescriptor.getPixelMap
## LayeredDrawableDescriptor.getPixelMap
...
@@ -86,7 +87,8 @@ getPixelMap(): image.PixelMap;
...
@@ -86,7 +87,8 @@ getPixelMap(): image.PixelMap;
**示例:**
**示例:**
```
ts
```
ts
pixmap
:
PixelMap
=
layeredDrawable1
.
getPixelMap
();
pixmap
:
PixelMap
=
((
<
LayeredDrawableDescriptor
>
(
this
.
resManager
.
getDrawableDescriptor
(
$r
(
'
app.media.icon
'
)
.
id
))).
getForeground
()).
getPixelMap
();
```
```
## LayeredDrawableDescriptor.getForeground
## LayeredDrawableDescriptor.getForeground
...
@@ -104,7 +106,8 @@ getForeground(): DrawableDescriptor;
...
@@ -104,7 +106,8 @@ getForeground(): DrawableDescriptor;
**示例:**
**示例:**
```
ts
```
ts
drawable
:
DrawableDescriptor
=
layeredDrawable1
.
getForeground
();
drawable
:
DrawableDescriptor
=
(
<
LayeredDrawableDescriptor
>
(
this
.
resManager
.
getDrawableDescriptor
(
$r
(
'
app.media.icon
'
)
.
id
))).
getForeground
();
```
```
## LayeredDrawableDescriptor.getBackground
## LayeredDrawableDescriptor.getBackground
...
@@ -122,7 +125,8 @@ getBackground(): DrawableDescriptor;
...
@@ -122,7 +125,8 @@ getBackground(): DrawableDescriptor;
**示例:**
**示例:**
```
ts
```
ts
drawable
:
DrawableDescriptor
=
layeredDrawable1
.
getBackground
();
drawable
:
DrawableDescriptor
=
(
<
LayeredDrawableDescriptor
>
(
this
.
resManager
.
getDrawableDescriptor
(
$r
(
'
app.media.icon
'
)
.
id
))).
getBackground
();
```
```
## LayeredDrawableDescriptor.getMask
## LayeredDrawableDescriptor.getMask
...
@@ -140,5 +144,6 @@ getMask(): DrawableDescriptor;
...
@@ -140,5 +144,6 @@ getMask(): DrawableDescriptor;
**示例:**
**示例:**
```
ts
```
ts
drawable
:
DrawableDescriptor
=
layeredDrawable1
.
getMask
();
drawable
:
DrawableDescriptor
=
(
<
LayeredDrawableDescriptor
>
(
this
.
resManager
.
getDrawableDescriptor
(
$r
(
'
app.media.icon
'
)
.
id
))).
getMask
();
```
```
zh-cn/application-dev/reference/apis/js-apis-curve.md
浏览文件 @
5f0ed18f
...
@@ -16,7 +16,7 @@ import Curves from '@ohos.curves'
...
@@ -16,7 +16,7 @@ import Curves from '@ohos.curves'
## Curves.initCurve<sup>9+</sup>
## Curves.initCurve<sup>9+</sup>
initCurve(curve?: Curve)
:
ICurve
initCurve(curve?: Curve)
:
ICurve
插值曲线的初始化函数,可以根据入参创建一个插值曲线对象。
插值曲线的初始化函数,可以根据入参创建一个插值曲线对象。
...
@@ -25,9 +25,9 @@ initCurve(curve?: Curve):ICurve
...
@@ -25,9 +25,9 @@ initCurve(curve?: Curve):ICurve
**参数:**
**参数:**
| 参数名 | 类型
| 必填 | 默认值 | 说明
|
| 参数名 | 类型
| 必填 | 说明
|
| ------ | -----------------------------------------------
------------- | ---- | ------------ |
---------- |
| ------ | -----------------------------------------------
| ---- | -------------------------
---------- |
| curve |
[
Curve
](
../arkui-ts/ts-appendix-enums.md#curve
)
| 否 |
Curve.Linear | 曲线类型。
|
| curve |
[
Curve
](
../arkui-ts/ts-appendix-enums.md#curve
)
| 否 |
曲线类型。
<br/>
默认值:Curve.Linear
|
**返回值:**
**返回值:**
...
@@ -45,7 +45,7 @@ Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
...
@@ -45,7 +45,7 @@ Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
## Curves.stepsCurve<sup>9+</sup>
## Curves.stepsCurve<sup>9+</sup>
stepsCurve(count: number, end: boolean)
:
ICurve
stepsCurve(count: number, end: boolean)
:
ICurve
构造阶梯曲线对象。
构造阶梯曲线对象。
...
@@ -75,7 +75,7 @@ Curves.stepsCurve(9, true) //创建一个阶梯曲线
...
@@ -75,7 +75,7 @@ Curves.stepsCurve(9, true) //创建一个阶梯曲线
## Curves.cubicBezierCurve<sup>9+</sup>
## Curves.cubicBezierCurve<sup>9+</sup>
cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)
:
ICurve
cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)
:
ICurve
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间。
...
@@ -108,7 +108,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
...
@@ -108,7 +108,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
## Curves.springCurve<sup>9+</sup>
## Curves.springCurve<sup>9+</sup>
springCurve(velocity: number, mass: number, stiffness: number, damping: number)
:
ICurve
springCurve(velocity: number, mass: number, stiffness: number, damping: number)
:
ICurve
构造弹簧曲线对象,曲线形状由弹簧参数决定,动画时长受animation、animateTo中的duration参数控制。
构造弹簧曲线对象,曲线形状由弹簧参数决定,动画时长受animation、animateTo中的duration参数控制。
...
@@ -160,7 +160,7 @@ springMotion(response?: number, dampingFraction?: number, overlapDuration?: numb
...
@@ -160,7 +160,7 @@ springMotion(response?: number, dampingFraction?: number, overlapDuration?: numb
| 类型 | 说明 |
| 类型 | 说明 |
| ---------------------------------- | ---------------- |
| ---------------------------------- | ---------------- |
|
[
ICurve
](
#icurve
)
| 曲线对象。
<br>
**说明:**
弹性动画曲线为物理曲线,
[
animation
](
../arkui-ts/ts-animatorproperty.md
)
、
[
animateTo
](
../arkui-ts/ts-explicit-animation.md
)
中的duration参数不生效,动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一,故不能通过该曲线的
[
interpolate
](
#interpolate
)
函数获得插值。 |
|
[
ICurve
](
#icurve
)
| 曲线对象。
<br>
**说明:**
弹性动画曲线为物理曲线,
[
animation
](
../arkui-ts/ts-animatorproperty.md
)
、
[
animateTo
](
../arkui-ts/ts-explicit-animation.md
)
中的duration参数不生效,动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一,故不能通过该曲线的
[
interpolate
](
#interpolate
9
)
函数获得插值。 |
**示例:**
**示例:**
...
@@ -193,7 +193,7 @@ responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDurat
...
@@ -193,7 +193,7 @@ responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDurat
| 类型 | 说明 |
| 类型 | 说明 |
| ---------------------------------- | ---------------- |
| ---------------------------------- | ---------------- |
|
[
ICurve
](
#icurve
)
| 曲线对象。
<br>
**说明:**
<br>
1、弹性跟手动画曲线为springMotion的一种特例,仅默认值不同。如果使用自定义参数的弹性曲线,推荐使用springMotion构造曲线;如果使用跟手动画,推荐使用默认参数的弹性跟手动画曲线。
<br>
2、
[
animation
](
../arkui-ts/ts-animatorproperty.md
)
、
[
animateTo
](
../arkui-ts/ts-explicit-animation.md
)
中的duration参数不生效,动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度,也不能通过该曲线的
[
interpolate
](
#interpolate
)
函数获得插值。 |
|
[
ICurve
](
#icurve
)
| 曲线对象。
<br>
**说明:**
<br>
1、弹性跟手动画曲线为springMotion的一种特例,仅默认值不同。如果使用自定义参数的弹性曲线,推荐使用springMotion构造曲线;如果使用跟手动画,推荐使用默认参数的弹性跟手动画曲线。
<br>
2、
[
animation
](
../arkui-ts/ts-animatorproperty.md
)
、
[
animateTo
](
../arkui-ts/ts-explicit-animation.md
)
中的duration参数不生效,动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度,也不能通过该曲线的
[
interpolate
](
#interpolate
9
)
函数获得插值。 |
**示例:**
**示例:**
...
@@ -205,7 +205,7 @@ Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线
...
@@ -205,7 +205,7 @@ Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线
## Curves.interpolatingSpring<sup>10+</sup>
## Curves.interpolatingSpring<sup>10+</sup>
interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number)
:
ICurve
interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number)
:
ICurve
构造插值器弹簧曲线对象,生成一条从0到1的动画曲线,实际动画值根据曲线进行插值计算。动画时间由曲线参数决定,不受animation、animateTo中的duration参数控制。
构造插值器弹簧曲线对象,生成一条从0到1的动画曲线,实际动画值根据曲线进行插值计算。动画时间由曲线参数决定,不受animation、animateTo中的duration参数控制。
...
@@ -260,7 +260,7 @@ import Curves from '@ohos.curves'
...
@@ -260,7 +260,7 @@ import Curves from '@ohos.curves'
interpolate
(
fraction
)
{
interpolate
(
fraction
)
{
return
Math
.
sqrt
(
fraction
);
return
Math
.
sqrt
(
fraction
);
}
}
Curves
.
customCurve
(
this
.
interpolate
)
// 创建一个用户自定义插值曲线
private
curve
=
Curves
.
customCurve
(
this
.
interpolate
)
// 创建一个用户自定义插值曲线
```
```
...
@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线
...
@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线
## ICurve
## ICurve
### interpolate
### interpolate
<sup>9+</sup>
interpolate(fraction:
number): number
interpolate(fraction:
number): number
...
@@ -310,9 +310,9 @@ init(curve?: Curve): string
...
@@ -310,9 +310,9 @@ init(curve?: Curve): string
**参数:**
**参数:**
| 参数名 | 类型
| 必填 | 默认值 | 说明
|
| 参数名 | 类型
| 必填 | 说明
|
| ------ | -----------------------------------------------
------------- | ---- | ------------ |
---------- |
| ------ | -----------------------------------------------
| ---- | -------------------------
---------- |
| curve |
[
Curve
](
../arkui-ts/ts-appendix-enums.md#curve
)
| 否 | Curve.Linear | 曲线类型。
|
| curve |
[
Curve
](
../arkui-ts/ts-appendix-enums.md#curve
)
| 否 | 曲线类型。
<br/>
默认值:Curve.Linear
|
## Curves.steps<sup>(deprecated)</sup>
## Curves.steps<sup>(deprecated)</sup>
...
...
zh-cn/application-dev/reference/apis/js-apis-font.md
浏览文件 @
5f0ed18f
...
@@ -5,6 +5,8 @@
...
@@ -5,6 +5,8 @@
> **说明**
> **说明**
>
>
> 本模块首批接口从API version 9开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
> 本模块首批接口从API version 9开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
>
> 本模块接口为系统接口。
## 导入模块
## 导入模块
...
...
zh-cn/application-dev/reference/apis/js-apis-matrix4.md
浏览文件 @
5f0ed18f
...
@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4'
...
@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4'
## matrix4.init
## matrix4.init
init(
array: Array
<
number
>
): Matrix4Transit
init(
option: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]
): Matrix4Transit
Matrix的构造函数,可以通过传入的参数创建一个四阶矩阵,矩阵为列优先。
Matrix的构造函数,可以通过传入的参数创建一个四阶矩阵,矩阵为列优先。
...
@@ -25,17 +25,17 @@ Matrix的构造函数,可以通过传入的参数创建一个四阶矩阵,
...
@@ -25,17 +25,17 @@ Matrix的构造函数,可以通过传入的参数创建一个四阶矩阵,
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型
| 必填 | 说明 |
| ------ | ------------------- | ---- | ------------------------------------------------------------ |
| ------ | -------------------
-----------------------------------------
| ---- | ------------------------------------------------------------ |
|
array | Array
<
number
>
| 是 | 参数为长度为16(4
\*
4)的number数组,
详情见参数描述
。
<br/>
默认值:
<br/>
[1,
0,
0,
0,
<br/>
0,
1,
0,
0,
<br/>
0,
0,
1,
0,
<br/>
0,
0,
0,
1] |
|
option | [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] | 是 | 参数为长度为16(4
\*
4)的number数组,
详情见四阶矩阵说明
。
<br/>
默认值:
<br/>
[1,
0,
0,
0,
<br/>
0,
1,
0,
0,
<br/>
0,
0,
1,
0,
<br/>
0,
0,
0,
1] |
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | ---------------------------- |
| --------------
-------------------
| ---------------------------- |
|
Matrix4Transit
| 根据入参创建的四阶矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 根据入参创建的四阶矩阵对象。 |
**
array参数
说明:**
**
四阶矩阵
说明:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | -------------------- |
| ---- | ------ | ---- | -------------------- |
...
@@ -91,9 +91,9 @@ Matrix的初始化函数,可以返回一个单位矩阵对象。
...
@@ -91,9 +91,9 @@ Matrix的初始化函数,可以返回一个单位矩阵对象。
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | -------------- |
| --------------
-------------------
| -------------- |
|
Matrix4Transit
| 单位矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 单位矩阵对象。 |
**示例:**
**示例:**
...
@@ -136,9 +136,9 @@ Matrix的拷贝函数,可以拷贝一份当前的矩阵对象。
...
@@ -136,9 +136,9 @@ Matrix的拷贝函数,可以拷贝一份当前的矩阵对象。
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | -------------------- |
| --------------
-------------------
| -------------------- |
|
Matrix4Transit
| 当前矩阵的拷贝对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 当前矩阵的拷贝对象。 |
**示例:**
**示例:**
...
@@ -171,12 +171,12 @@ struct Test {
...
@@ -171,12 +171,12 @@ struct Test {


## Matrix4
## Matrix4
Transit
### combine
### combine
combine(
matrix: Matrix4
): Matrix4Transit
combine(
option: Matrix4Transit
): Matrix4Transit
Matrix的叠加函数,可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。
Matrix的叠加函数,可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。
...
@@ -185,15 +185,15 @@ Matrix的叠加函数,可以将两个矩阵的效果叠加起来生成一个
...
@@ -185,15 +185,15 @@ Matrix的叠加函数,可以将两个矩阵的效果叠加起来生成一个
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型
| 必填 | 说明 |
| ------ | ------- | ---- | ------------------ |
| ------ | -------
--------------------------
| ---- | ------------------ |
|
matrix | Matrix4
| 是 | 待叠加的矩阵对象。 |
|
option |
[
Matrix4Transit
](
#matrix4transit
)
| 是 | 待叠加的矩阵对象。 |
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | ------------------ |
| --------------
-------------------
| ------------------ |
|
Matrix4Transit
| 矩阵叠加后的对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 矩阵叠加后的对象。 |
**示例:**
**示例:**
...
@@ -238,9 +238,9 @@ Matrix的逆函数,可以返回一个当前矩阵对象的逆矩阵,即效
...
@@ -238,9 +238,9 @@ Matrix的逆函数,可以返回一个当前矩阵对象的逆矩阵,即效
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | ---------------------- |
| --------------
-------------------
| ---------------------- |
|
Matrix4Transit
| 当前矩阵的逆矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 当前矩阵的逆矩阵对象。 |
**示例:**
**示例:**
...
@@ -273,25 +273,23 @@ struct Tests {
...
@@ -273,25 +273,23 @@ struct Tests {
### translate
### translate
translate(
{x?: number, y?: number, z?: number}
): Matrix4Transit
translate(
option: TranslateOption
): Matrix4Transit
Matrix的平移函数,可以为当前矩阵增加x轴/
Y轴/Z
轴平移效果。
Matrix的平移函数,可以为当前矩阵增加x轴/
y轴/z
轴平移效果。
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| ------ | ----------------------------------- | ---- | -------------- |
| x | number | 否 | x轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
| option |
[
TranslateOption
](
#translateoption
)
| 是 | 设置平移参数。 |
| y | number | 否 | y轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
| z | number | 否 | z轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | ---------------------------- |
| --------------
-------------------
| ---------------------------- |
|
Matrix4Transit
| 增加好平移效果后的矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 增加好平移效果后的矩阵对象。 |
**示例:**
**示例:**
...
@@ -319,28 +317,30 @@ struct Test {
...
@@ -319,28 +317,30 @@ struct Test {
### scale
### scale
scale(
{x?: number, y?: number, z?: number, centerX?: number, centerY?: number}
): Matrix4Transit
scale(
option: ScaleOption
): Matrix4Transit
Matrix的缩放函数,可以为当前矩阵增加x轴/
Y轴/Z
轴缩放效果。
Matrix的缩放函数,可以为当前矩阵增加x轴/
y轴/z
轴缩放效果。
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| ------ | --------------------------- | ---- | -------------- |
| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大,x
<
1
时以x轴方向缩小
。<
br
/>
默认值:1
<br/>
取值范围
[
0, +∞)<br/>**说明:** <br/>设置小于0的值时,按照默认值处理。 |
| option |
[
ScaleOption
](
#scaleoption
)
| 是 | 设置缩放参数。 |
| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大,y<1时以y轴方向缩小。<br/>默认值:1<br/>取值范围 [0, +∞)<br/>**说明:** <br/>设置小于0的值时,按照默认值处理。 |
| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大,z<1时以z轴方向缩小。<br/>默认值:1<br/>取值范围 [0, +∞)<br/>**说明:** <br/>设置小于0的值时,按照默认值处理。 |
| centerX | number | 否 | 变换中心点x轴坐标。<br/>默认值:0。<br/>取值范围 (-∞, +∞) |
| centerY | number | 否 | 变换中心点y轴坐标。<br/>默认值:0。<br/>取值范围 (-∞, +∞) |
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型 | 说明 |
| -------------- | ---------------------------- |
| --------------------------------- | ---------------------------- |
| Matrix4Transit | 增加好缩放效果后的矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 增加好平移效果后的矩阵对象。 |
**返回值:**
| 类型 | 说明 |
| --------------------------------- | ---------------------------- |
|
[
Matrix4Transit
](
#matrix4transit
)
| 增加好缩放效果后的矩阵对象。 |
**示例:**
**示例:**
...
@@ -367,29 +367,30 @@ struct Test {
...
@@ -367,29 +367,30 @@ struct Test {
### rotate
### rotate
rotate(
{x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}
): Matrix4Transit
rotate(
option: RotateOption
): Matrix4Transit
Matrix的旋转函数,可以为当前矩阵增加x轴/
Y轴/Z
轴旋转效果。
Matrix的旋转函数,可以为当前矩阵增加x轴/
y轴/z
轴旋转效果。
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**系统能力:**
SystemCapability.ArkUI.ArkUI.Full
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------- |
| ------ | ----------------------------- | ---- | -------------- |
| x | number | 否 | 旋转轴向量x坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
| option |
[
RotateOption
](
#rotateoption
)
| 是 | 设置旋转参数。 |
| y | number | 否 | 旋转轴向量y坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
| z | number | 否 | 旋转轴向量z坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
**返回值:**
| angle | number | 否 | 旋转角度。
<br/>
默认值:0 |
| centerX | number | 否 | 变换中心点x轴坐标。
<br/>
默认值:0 |
| 类型 | 说明 |
| centerY | number | 否 | 变换中心点y轴坐标。
<br/>
默认值:0 |
| --------------------------------- | ---------------------------- |
|
[
Matrix4Transit
](
#matrix4transit
)
| 增加好平移效果后的矩阵对象。 |
**返回值:**
**返回值:**
| 类型 | 说明 |
| 类型
| 说明 |
| -------------- | ---------------------------- |
| --------------
-------------------
| ---------------------------- |
|
Matrix4Transit
| 增加好旋转效果后的矩阵对象。 |
|
[
Matrix4Transit
](
#matrix4transit
)
| 增加好旋转效果后的矩阵对象。 |
**示例:**
**示例:**
...
@@ -417,7 +418,7 @@ struct Test {
...
@@ -417,7 +418,7 @@ struct Test {
### transformPoint
### transformPoint
transformPoint(
point: Point): Point
transformPoint(
option: [number, number]): [number, number]
Matrix的坐标点转换函数,可以将当前的变换效果作用到一个坐标点上。
Matrix的坐标点转换函数,可以将当前的变换效果作用到一个坐标点上。
...
@@ -426,15 +427,15 @@ Matrix的坐标点转换函数,可以将当前的变换效果作用到一个
...
@@ -426,15 +427,15 @@ Matrix的坐标点转换函数,可以将当前的变换效果作用到一个
**参数:**
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型
| 必填 | 说明 |
| ------ | ----- | ---- | ------------------ |
| ------ | -----
-----------
| ---- | ------------------ |
|
point | Point
| 是 | 需要转换的坐标点。 |
|
option | [number, number]
| 是 | 需要转换的坐标点。 |
**返回值:**
**返回值:**
| 类型
| 说明
|
| 类型
| 说明
|
| -----
|
---------------- |
| -----
----------- | -----------
---------------- |
|
Point
| 返回矩阵变换后的Point对象。 |
|
[number, number]
| 返回矩阵变换后的Point对象。 |
**示例:**
**示例:**
...
@@ -471,4 +472,33 @@ struct Test {
...
@@ -471,4 +472,33 @@ struct Test {
}
}
```
```


\ No newline at end of file
## TranslateOption
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | 否 | x轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
| y | number | 否 | y轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
| z | number | 否 | z轴的平移距离,单位px。
<br/>
默认值:0
<br/>
取值范围 (-∞, +∞) |
## ScaleOption
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大,x
<
1
时以x轴方向缩小
。<
br
/>
默认值:1
<br/>
取值范围 [0, +∞)
<br/>
**说明:**
<br/>
设置小于0的值时,按照默认值处理。 |
| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大,y
<
1
时以y轴方向缩小
。<
br
/>
默认值:1
<br/>
取值范围 [0, +∞)
<br/>
**说明:**
<br/>
设置小于0的值时,按照默认值处理。 |
| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大,z
<
1
时以z轴方向缩小
。<
br
/>
默认值:1
<br/>
取值范围 [0, +∞)
<br/>
**说明:**
<br/>
设置小于0的值时,按照默认值处理。 |
| centerX | number | 否 | 变换中心点x轴坐标。
<br/>
默认值:0。
<br/>
取值范围 (-∞, +∞) |
| centerY | number | 否 | 变换中心点y轴坐标。
<br/>
默认值:0。
<br/>
取值范围 (-∞, +∞) |
## RotateOption
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | 否 | 旋转轴向量x坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
| y | number | 否 | 旋转轴向量y坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
| z | number | 否 | 旋转轴向量z坐标。
<br/>
默认值:1。
<br/>
取值范围 (-∞, +∞) |
| angle | number | 否 | 旋转角度。
<br/>
默认值:0 |
| centerX | number | 否 | 变换中心点x轴坐标。
<br/>
默认值:0 |
| centerY | number | 否 | 变换中心点y轴坐标。
<br/>
默认值:0 |
\ No newline at end of file
zh-cn/application-dev/reference/apis/js-apis-measure.md
浏览文件 @
5f0ed18f
...
@@ -112,7 +112,7 @@ struct Index {
...
@@ -112,7 +112,7 @@ struct Index {
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型 | 必填 | 说明 |
| -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
| -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
| textContent
<sup>
10+
</sup>
| string | 是 | 设置被计算文本内容。 |
| textContent | string | 是 | 设置被计算文本内容。 |
| constraintWidth
<sup>
10+
</sup>
| number
\|
string
\|
[
Resource
](
../arkui-ts/ts-types.md#resource
)
| 否 | 设置被计算文本布局宽度。
<br/>
**说明:**
默认单位为vp |
| constraintWidth
<sup>
10+
</sup>
| number
\|
string
\|
[
Resource
](
../arkui-ts/ts-types.md#resource
)
| 否 | 设置被计算文本布局宽度。
<br/>
**说明:**
默认单位为vp |
| fontSize | number
\|
string
\|
[
Resource
](
../arkui-ts/ts-types.md#resource
)
| 否 | 设置被计算文本字体大小,fontSize为number类型时,使用fp单位。
<br/>
默认值:16fp。
<br/>
**说明:**
不支持设置百分比字符串。 |
| fontSize | number
\|
string
\|
[
Resource
](
../arkui-ts/ts-types.md#resource
)
| 否 | 设置被计算文本字体大小,fontSize为number类型时,使用fp单位。
<br/>
默认值:16fp。
<br/>
**说明:**
不支持设置百分比字符串。 |
| fontStyle | number
\|
[
FontStyle
](
../arkui-ts/ts-appendix-enums.md#fontstyle
)
| 否 | 设置被计算文本字体样式。
<br>
默认值:FontStyle.Normal |
| fontStyle | number
\|
[
FontStyle
](
../arkui-ts/ts-appendix-enums.md#fontstyle
)
| 否 | 设置被计算文本字体样式。
<br>
默认值:FontStyle.Normal |
...
...
zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md
浏览文件 @
5f0ed18f
...
@@ -376,10 +376,24 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ):
...
@@ -376,10 +376,24 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ):
| eventType | string | 是 | 监听的事件类型,
可选值为:"push"
、"request"。
<br/>
"push”:指组件提供者向使用者主动推送数据。
<br/>
"request”:指组件使用者向提供者主动请求数据。 |
| eventType | string | 是 | 监听的事件类型,
可选值为:"push"
、"request"。
<br/>
"push”:指组件提供者向使用者主动推送数据。
<br/>
"request”:指组件使用者向提供者主动请求数据。 |
| callback |
[
OnPushEventCallback
](
#onpusheventcallback
)
\|
[
OnRequestEventCallback
](
#onrequesteventcallback
)
| 是 | 对应监听回调,push事件对应回调类型为
[
OnPushEventCallback
](
#onpusheventcallback
)
,request事件对应回调类型为
[
OnRequestEventCallback
](
#onrequesteventcallback
)
。 |
| callback |
[
OnPushEventCallback
](
#onpusheventcallback
)
\|
[
OnRequestEventCallback
](
#onrequesteventcallback
)
| 是 | 对应监听回调,push事件对应回调类型为
[
OnPushEventCallback
](
#onpusheventcallback
)
,request事件对应回调类型为
[
OnRequestEventCallback
](
#onrequesteventcallback
)
。 |
**示例:**
**示例:**
```
js
```
js
function
onPushListener
(
source
,
template
,
data
,
extraData
)
{
console
.
log
(
"
onPushListener template.source=
"
+
template
.
source
)
console
.
log
(
"
onPushListener source=
"
+
JSON
.
stringify
(
source
))
console
.
log
(
"
onPushListener template=
"
+
JSON
.
stringify
(
template
))
console
.
log
(
"
onPushListener data=
"
+
JSON
.
stringify
(
data
))
console
.
log
(
"
onPushListener extraData=
"
+
JSON
.
stringify
(
extraData
))
}
function
onRequestListener
(
source
,
name
,
data
)
{
console
.
error
(
"
onRequestListener
"
);
console
.
log
(
"
onRequestListener source=
"
+
JSON
.
stringify
(
source
));
console
.
log
(
"
onRequestListener name=
"
+
name
);
console
.
log
(
"
onRequestListener data=
"
+
JSON
.
stringify
(
data
));
return
{
template
:
"
ets/pages/plugin.js
"
,
data
:
data
};
}
pluginComponentManager
.
on
(
"
push
"
,
onPushListener
)
pluginComponentManager
.
on
(
"
push
"
,
onPushListener
)
pluginComponentManager
.
on
(
"
request
"
,
onRequestListener
)
pluginComponentManager
.
on
(
"
request
"
,
onRequestListener
)
```
```
...
...
zh-cn/application-dev/reference/apis/js-apis-system-router.md
浏览文件 @
5f0ed18f
...
@@ -341,8 +341,8 @@ export default {
...
@@ -341,8 +341,8 @@ export default {
| 名称 | 类型 | 必填 | 说明 |
| 名称 | 类型 | 必填 | 说明 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| uri
<sup>
7+
</sup>
| string | 是 | 目标页面的uri,可以是以下的两种格式:
<br/>
1. 页面的绝对路径,由config.json文件中的页面列表提供。例如:
<br/>
- pages/index/index
<br/>
-pages/detail/detail
<br/>
2. 特定路径。如果URI为斜杠(/),则显示主页。 |
| uri | string | 是 | 目标页面的uri,可以是以下的两种格式:
<br/>
1. 页面的绝对路径,由config.json文件中的页面列表提供。例如:
<br/>
- pages/index/index
<br/>
-pages/detail/detail
<br/>
2. 特定路径。如果URI为斜杠(/),则显示主页。 |
| params
<sup>
7+
</sup>
| object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用,如this.keyValue(keyValue为跳转时params参数中的key值),如果目标页面中已有该字段,则其值会被传入的字段值覆盖。 |
| params | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后,使用router.getParams()获取传递的参数,此外,在类web范式中,参数也可以在页面中直接使用,如this.keyValue(keyValue为跳转时params参数中的key值),如果目标页面中已有该字段,则其值会被传入的字段值覆盖。 |
## BackRouterOptions
## BackRouterOptions
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @
5f0ed18f
...
@@ -30,7 +30,7 @@
...
@@ -30,7 +30,7 @@
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| count | number | 是 | 设置提醒消息数。
<br/>
**说明:**
<br/>
小于等于0时不显示信息标记。
<br/>
取值范围:[-2147483648,2147483647],非整数时会舍去小数部分取整数部分,如5.5取5。 |
| count | number | 是 | 设置提醒消息数。
<br/>
**说明:**
<br/>
小于等于0时不显示信息标记。
<br/>
取值范围:[-2147483648,2147483647],非整数时会舍去小数部分取整数部分,如5.5取5。 |
| position |
[
BadgePosition
](
#badgeposition枚举说明
)
| 否 | 设置提示点显示位置。
<br/>
默认值:BadgePosition.RightTop |
| position |
[
BadgePosition
](
#badgeposition枚举说明
)
| 否 | 设置提示点显示位置。
<br/>
默认值:BadgePosition.RightTop |
| maxCount | number | 否 | 最大消息数,超过最大消息时仅显示maxCount+。
<br/>
默认值:99 |
| maxCount | number | 否 | 最大消息数,超过最大消息时仅显示maxCount+。
<br/>
默认值:99
<br/>
取值范围:[-2147483648,2147483647],非整数时会舍去小数部分取整数部分,如5.5取5。
|
| style |
[
BadgeStyle
](
#badgestyle对象说明
)
| 是 | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
| style |
[
BadgeStyle
](
#badgestyle对象说明
)
| 是 | Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
**方法2:**
Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
**方法2:**
Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
...
...
zh-cn/third-party-cases/Readme-CN.md
浏览文件 @
5f0ed18f
...
@@ -25,6 +25,7 @@
...
@@ -25,6 +25,7 @@
-
[
如何使用OpenGL实现3D图形
](
how-to-use-opengl-to-draw-3d-graphics.md
)
-
[
如何使用OpenGL实现3D图形
](
how-to-use-opengl-to-draw-3d-graphics.md
)
-
[
常见弹窗的使用
](
diverse-dialogues.md
)
-
[
常见弹窗的使用
](
diverse-dialogues.md
)
-
[
折叠展开动效
](
collapse-and-expand.md
)
-
[
折叠展开动效
](
collapse-and-expand.md
)
-
[
列表上拉加载更多内容
](
list-pullup-loading-data.md
)
### 装饰器
### 装饰器
-
[
控制页面刷新范围
](
overall-and-part-refresh.md
)
-
[
控制页面刷新范围
](
overall-and-part-refresh.md
)
-
[
如何监听多层状态变化
](
observed-and-objectlink.md
)
-
[
如何监听多层状态变化
](
observed-and-objectlink.md
)
...
@@ -35,6 +36,7 @@
...
@@ -35,6 +36,7 @@
### 窗口管理
### 窗口管理
-
[
如何实现沉浸模式
](
immersion-mode.md
)
-
[
如何实现沉浸模式
](
immersion-mode.md
)
-
[
如何创建悬浮窗
](
float-window.md
)
-
[
如何创建悬浮窗
](
float-window.md
)
-
[
保持屏幕常亮
](
keep-screen-on.md
)
### 媒体
### 媒体
-
[
常见图片编辑
](
image-edit.md
)
-
[
常见图片编辑
](
image-edit.md
)
...
...
zh-cn/third-party-cases/figures/list-pullup-loading.gif
0 → 100644
浏览文件 @
5f0ed18f
974.4 KB
zh-cn/third-party-cases/figures/screenon.gif
0 → 100644
浏览文件 @
5f0ed18f
106.0 KB
zh-cn/third-party-cases/griditem-drag-and-drop.md
浏览文件 @
5f0ed18f
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
### 运行环境
### 运行环境
-
IDE:DevEco Studio 3.1 Beta2
-
IDE:DevEco Studio 3.1 Beta2
-
SDK:Ohos_sdk_public 3.2.11.
5
(API Version 9 Release)
-
SDK:Ohos_sdk_public 3.2.11.
9
(API Version 9 Release)
### 实现原理
### 实现原理
...
...
zh-cn/third-party-cases/keep-screen-on.md
0 → 100644
浏览文件 @
5f0ed18f
## 保持屏幕常亮
### 场景说明
在使用开发板进行应用开发调试时,不操作屏幕一段时间后,屏幕会熄屏变黑,再操作时需要再次点亮屏幕,耗费时间不利于调试。本例将介绍如何通过窗口管理相关接口实现屏幕常亮。
### 效果呈现
本示例最终效果如下(在开发板中可验证实际常亮效果):

### 运行环境
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
-
IDE:DevEco Studio 3.1 Release
-
SDK:Ohos_sdk_public 3.2.12.2 (API Version 9 Release)
### 实现思路
通过Window的setWindowKeepScreenOn方法,在需要时控制屏幕是否常亮,并通过Window的getWindowProperties().isKeepScreenOn查看窗口属性中屏幕常亮的状态。
### 开发步骤
1.
构建简易界面,用于显示当前屏幕常亮的状态,并绘制按钮用于设置常亮和取消常亮。
```
ts
build
()
{
Row
()
{
Column
()
{
Text
(
this
.
message
+
this
.
isScreenOn
)
...
Button
(
'
设置常亮
'
)
...
.
onClick
(()
=>
{
this
.
keepScreenOn
(
true
)
})
Button
(
'
取消常亮
'
)
...
.
onClick
(()
=>
{
this
.
keepScreenOn
(
false
)
})
}
.
width
(
'
100%
'
)
}
.
height
(
'
100%
'
)
}
```
2.
获取应用上下文并通过其获取到当前窗口实例,通过窗口实例的setWindowKeepScreenOn方法控制屏幕是否常亮,并通过getWindowProperties获取窗口属性,从而查看属性中屏幕常亮状态isKeepScreenOn的取值。
```
ts
import
common
from
'
@ohos.app.ability.common
'
;
import
window
from
'
@ohos.window
'
;
private
context
:
common
.
BaseContext
=
getContext
(
this
)
as
common
.
BaseContext
async
keepScreenOn
(
status
)
{
let
windowClass
=
await
window
.
getLastWindow
(
this
.
context
)
//获取窗口实例
await
windowClass
.
setWindowKeepScreenOn
(
status
)
//设置窗口常亮或取消
this
.
isScreenOn
=
await
windowClass
.
getWindowProperties
().
isKeepScreenOn
//查看屏幕常亮状态
}
```
### 完整代码
通过上述步骤可以完成整个示例的开发,完整代码如下:
```
ts
import
common
from
'
@ohos.app.ability.common
'
;
import
window
from
'
@ohos.window
'
;
@
Entry
@
Component
struct
KeepScreenOn
{
@
State
message
:
string
=
'
常亮状态 :
'
@
State
isScreenOn
:
boolean
=
false
private
context
:
common
.
BaseContext
=
getContext
(
this
)
as
common
.
BaseContext
async
keepScreenOn
(
status
)
{
let
windowClass
=
await
window
.
getLastWindow
(
this
.
context
)
//获取窗口实例
await
windowClass
.
setWindowKeepScreenOn
(
status
)
//设置窗口常亮或取消
this
.
isScreenOn
=
await
windowClass
.
getWindowProperties
().
isKeepScreenOn
//查看屏幕常亮状态
}
build
()
{
Row
()
{
Column
()
{
Text
(
this
.
message
+
this
.
isScreenOn
)
.
fontSize
(
50
)
.
fontWeight
(
FontWeight
.
Bold
)
Button
(
'
设置常亮
'
)
.
fontSize
(
16
)
.
height
(
50
)
.
width
(
100
)
.
borderRadius
(
10
)
.
margin
({
top
:
20
})
.
backgroundColor
(
'
#A4AE77
'
)
.
onClick
(()
=>
{
this
.
keepScreenOn
(
true
)
})
Button
(
'
取消常亮
'
)
.
fontSize
(
16
)
.
height
(
50
)
.
width
(
100
)
.
borderRadius
(
10
)
.
margin
({
top
:
20
})
.
backgroundColor
(
'
#A4AE77
'
)
.
onClick
(()
=>
{
this
.
keepScreenOn
(
false
)
})
}
.
width
(
'
100%
'
)
}
.
height
(
'
100%
'
)
}
}
```
\ No newline at end of file
zh-cn/third-party-cases/list-pullup-loading-data.md
0 → 100644
浏览文件 @
5f0ed18f
## 列表上拉加载更多内容
### 场景说明
列表上拉加载更多内容是一种常见的数据更新场景,常见于各类阅读类应用中,例如新闻阅读应用中,当用户浏览新闻列表到底部时,上拉将加载更多的新闻内容。本例将介绍列表上拉加载更多内容这个场景的具体实现方式。
### 效果呈现
本示例最终效果如下:

### 运行环境
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:
-
IDE:DevEco Studio 3.1 Release
-
SDK:Ohos_sdk_public 3.2.12.2 (API Version 9 Release)
### 实现思路
1.
在页面布局上,通过在List列表末尾手工增加一个ListItem用于显示加载更多布局,通过visibility属性控制该ListItem的显示和隐藏,当上拉时显示,并根据加载中以及加载结果显示不同内容,加载完成后则隐藏。
2.
监听List列表的onTouch事件,并判断是否为上划、滑动距离是否达到设定的阈值等条件,在条件满足后,触发数据加载逻辑,重新渲染列表。
### 开发步骤
1.
利用ForEach循环渲染初始列表,在列表末尾增加一个ListItem用于显示加载更多布局,通过visibility属性控制显示和隐藏,并在List列表上拉过程中监听并处理onTouch事件。
末尾的ListItem可呈现的内容有:
*
正在加载中显示“正在加载”。
*
加载失败则显示"加载失败,点击重试",引导用户进行点击,从而重新加载。
```
ts
List
({
space
:
20
,
initialIndex
:
0
})
{
ForEach
(
this
.
list
,
(
item
)
=>
{
ListItem
()
{
...
}
},
item
=>
item
.
toString
())
ListItem
()
{
// 加载更多布局
Flex
({
justifyContent
:
FlexAlign
.
Center
,
alignItems
:
ItemAlign
.
Center
})
{
if
(
this
.
isShowRetry
)
{
Text
(
'
加载失败,点击重试
'
)
...
}
else
{
...
LoadingProgress
()
Text
(
'
正在加载...
'
)
}
}
}.
visibility
(
this
.
isLoadMore
?
Visibility
.
Visible
:
Visibility
.
None
)
}
.
onTouch
(
event
=>
this
.
handleTouchEvent
(
event
))
```
2.
实现列表上拉加载更多内容的核心,是设计处理onTouch事件的响应函数handleTouchEvent,在该函数中需要根据手指滑动的类型TouchType进行不同的处理:
a. 手指按下时(TouchType.Down),记录按下的坐标,用于后续滑动方向及滑动距离计算:
```
ts
case
TouchType
.
Down
:
// 手指按下
this
.
downY
=
event
.
touches
[
0
].
y
;
// 记录按下的y坐标
this
.
lastMoveY
=
event
.
touches
[
0
].
y
;
break
;
```
b. 手指滑动时(TouchType.Move),首先判断是否为上拉动作,如果为上拉动作,再判断是否达到上拉加载更多内容的条件。条件包括:
*
是否有更多数据正在处于加载中状态,避免同时加载更多数据,只有当前未处于数据加载状态时才可以加载更多数据,否则直接忽略本次上拉动作。
*
是否当前列表已滑动到最后一项,只有在最后一项时才可以加载更多数据。
*
上拉滑动的偏移量是否达到设定的阈值,只有达到阈值才可以加载更多数据。
```
ts
case
TouchType
.
Move
:
// 手指滑动
if
(
this
.
isLoading
)
{
// 更多数据加载中,不进入处理逻辑
return
;
}
if
(
event
.
touches
[
0
].
y
-
this
.
lastMoveY
<
0
)
{
// 手指上滑
// 因为加载更多是在列表后面新增一个item,当一屏能够展示全部列表,endIndex 为 length+1
if
(
this
.
endIndex
==
this
.
list
.
length
-
1
||
this
.
endIndex
==
this
.
list
.
length
)
{
this
.
offsetY
=
event
.
touches
[
0
].
y
-
this
.
downY
;
// 滑动的偏移量
if
(
Math
.
abs
(
this
.
offsetY
)
>
this
.
loadMoreHeight
)
{
// 数据加载的阈值
this
.
isLoadMore
=
true
// 可以刷新了
this
.
offsetY
=
this
.
loadMoreHeight
+
this
.
offsetY
*
0.1
// 偏移量缓慢增加
}
}
}
this
.
lastMoveY
=
event
.
touches
[
0
].
y
;
break
;
```
c. 手指抬起或滑动取消时(TouchType.UP或TouchType.Cancel),如果正处于数据加载中状态,则忽略,否则加载更多数据。
```
ts
case
TouchType
.
Up
:
// 手指抬起
case
TouchType
.
Cancel
:
// 事件取消
if
(
this
.
isLoading
)
{
// 更多数据加载中,不进入处理逻辑
return
;
}
this
.
touchUpLoadMore
()
break
```
3.
实现加载更多数据的逻辑,即在上述步骤的touchUpLoadMore方法中实现以下处理逻辑:
a. 通过动画处理列表回弹效果。
```
ts
animateTo
({
duration
:
300
,
// 动画时长
},
()
=>
{
this
.
offsetY
=
0
// 偏移量设置为0
})
```
b. 模拟请求加载更多数据的结果,包括:
-
正在加载:显示加载中效果。
-
加载成功:重新渲染List,更新加载状态。
-
加载失败:展示重新加载的引导说明,点击后重新触发touchUpLoadMore方法。
```
ts
if
(
this
.
isLoadMore
)
{
this
.
isLoading
=
true
// 加载中...
setTimeout
(()
=>
{
// 模拟耗时操作
this
.
getData
()
.
then
(
data
=>
{
if
(
data
===
StatusType
.
SUCCESS
)
{
// 加载成功
this
.
isShowRetry
=
false
this
.
loadMoreData
()
// 加载数据
this
.
isLoadMore
=
false
// 关闭加载更多
this
.
isLoading
=
false
}
})
.
catch
(
error
=>
{
// 加载失败
this
.
isShowRetry
=
true
// 展示“点击重试”
console
.
info
(
'
error message
'
+
error
)
})
},
2000
)
}
else
{
// 关闭加载更多
this
.
isLoadMore
=
false
this
.
isLoading
=
false
}
```
### 完整代码
通过上述步骤可以完成整个示例的开发,完整代码如下:
```
ts
@
Entry
@
Component
struct
ListPullupLoading
{
@
State
list
:
number
[]
=
[
0
,
1
,
2
,
3
,
4
,
5
,
6
,
7
,
8
,
9
]
@
State
offsetY
:
number
=
0
// 列表y坐标偏移量
private
downY
:
number
=
0
// 按下的y坐标
private
lastMoveY
:
number
=
0
// 上一次移动的坐标
private
endIndex
:
number
=
0
// 当前列表尾部索引
private
loadMoreHeight
=
100
// 触发上拉加载的阈值高度
@
State
isLoadMore
:
boolean
=
false
// 是否可以加载更多,上拉加载的布局是否显示
private
isLoading
:
boolean
=
false
// 是否加载中,加载中不进入触摸逻辑
@
State
isShowRetry
:
boolean
=
false
// 点击重试 是否显示
build
()
{
Column
()
{
List
({
space
:
20
,
initialIndex
:
0
})
{
ForEach
(
this
.
list
,
(
item
)
=>
{
ListItem
()
{
Text
(
''
+
item
).
width
(
'
100%
'
).
height
(
'
100%
'
)
.
fontSize
(
24
)
.
textAlign
(
TextAlign
.
Center
)
.
borderRadius
(
10
)
.
backgroundColor
(
0xDCDCDC
)
}.
width
(
'
100%
'
).
height
(
100
)
},
item
=>
item
.
toString
())
ListItem
()
{
// 加载更多布局
Flex
({
justifyContent
:
FlexAlign
.
Center
,
alignItems
:
ItemAlign
.
Center
})
{
if
(
this
.
isShowRetry
)
{
Text
(
'
加载失败,点击重试
'
)
.
margin
({
left
:
7
,
bottom
:
1
})
.
fontColor
(
Color
.
Grey
)
.
fontSize
(
24
)
.
onClick
(()
=>
{
this
.
isShowRetry
=
false
this
.
touchUpLoadMore
()
})
}
else
{
LoadingProgress
()
.
width
(
36
).
height
(
36
)
Text
(
'
正在加载...
'
)
.
margin
({
left
:
7
,
bottom
:
1
})
.
fontColor
(
Color
.
Grey
)
.
fontSize
(
24
)
}
}.
width
(
'
100%
'
).
height
(
'
100%
'
)
.
backgroundColor
(
0xFFFFFF
)
}
.
height
(
this
.
loadMoreHeight
)
.
visibility
(
this
.
isLoadMore
?
Visibility
.
Visible
:
Visibility
.
None
)
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
listDirection
(
Axis
.
Vertical
)
// 排列方向
.
onScrollIndex
((
start
:
number
,
end
:
number
)
=>
{
console
.
info
(
'
start =
'
+
start
.
toString
()
+
'
end =
'
+
end
.
toString
())
this
.
endIndex
=
end
})
.
onTouch
(
event
=>
this
.
handleTouchEvent
(
event
))
}
.
width
(
'
100%
'
)
.
height
(
'
100%
'
)
.
backgroundColor
(
0xFFFFFF
)
}
/**
* 处理onTouch事件
*/
handleTouchEvent
(
event
:
TouchEvent
)
{
switch
(
event
.
type
)
{
case
TouchType
.
Down
:
// 手指按下
this
.
downY
=
event
.
touches
[
0
].
y
;
// 记录按下的y坐标
this
.
lastMoveY
=
event
.
touches
[
0
].
y
;
break
;
case
TouchType
.
Move
:
// 手指滑动
if
(
this
.
isLoading
)
{
// 更多数据加载中,不进入处理逻辑
return
;
}
if
(
event
.
touches
[
0
].
y
-
this
.
lastMoveY
<
0
)
{
// 手指上滑
// 因为加载更多是在列表后面新增一个item,当一屏能够展示全部列表,endIndex 为 length+1
if
(
this
.
endIndex
==
this
.
list
.
length
-
1
||
this
.
endIndex
==
this
.
list
.
length
)
{
this
.
offsetY
=
event
.
touches
[
0
].
y
-
this
.
downY
;
// 滑动的偏移量
if
(
Math
.
abs
(
this
.
offsetY
)
>
this
.
loadMoreHeight
)
{
// 数据加载的阈值
this
.
isLoadMore
=
true
// 可以刷新了
this
.
offsetY
=
this
.
loadMoreHeight
+
this
.
offsetY
*
0.1
// 偏移量缓慢增加
}
}
}
this
.
lastMoveY
=
event
.
touches
[
0
].
y
;
break
;
case
TouchType
.
Up
:
// 手指抬起
case
TouchType
.
Cancel
:
// 事件取消
if
(
this
.
isLoading
)
{
// 更多数据加载中,不进入处理逻辑
return
;
}
this
.
touchUpLoadMore
()
break
}
}
/**
* 手指抬起,处理加载更多
*/
private
touchUpLoadMore
()
{
animateTo
({
duration
:
300
,
// 动画时长
},
()
=>
{
this
.
offsetY
=
0
// 偏移量设置为0
})
if
(
this
.
isLoadMore
)
{
this
.
isLoading
=
true
// 加载中...
setTimeout
(()
=>
{
// 模拟耗时操作
this
.
getData
()
.
then
(
data
=>
{
if
(
data
===
StatusType
.
SUCCESS
)
{
// 加载成功
this
.
isShowRetry
=
false
this
.
loadMoreData
()
// 加载数据
this
.
isLoadMore
=
false
// 关闭加载更多
this
.
isLoading
=
false
}
})
.
catch
(
error
=>
{
// 加载失败
this
.
isShowRetry
=
true
// 展示“点击重试”
console
.
info
(
'
error message
'
+
error
)
})
},
2000
)
}
else
{
// 关闭加载更多
this
.
isLoadMore
=
false
this
.
isLoading
=
false
}
}
/**
* mock 产生更多数据
*/
private
loadMoreData
()
{
let
initValue
=
this
.
list
[
this
.
list
.
length
-
1
]
+
1
;
for
(
let
i
=
initValue
;
i
<
initValue
+
10
;
i
++
)
{
this
.
list
.
push
(
i
)
}
}
/**
* 模拟数据加载结果
*/
private
getData
():
Promise
<
StatusType
>
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
randomNumber
:
number
=
Math
.
random
();
if
(
randomNumber
>=
0.5
)
{
resolve
(
StatusType
.
SUCCESS
)
}
else
{
reject
(
StatusType
.
FAIL
)
}
})
}
}
enum
StatusType
{
SUCCESS
,
FAIL
}
```
\ No newline at end of file
zh-cn/third-party-cases/listitem-slide-to-display-menu.md
浏览文件 @
5f0ed18f
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
## 运行环境
## 运行环境
-
IDE:DevEco Studio 3.1 Beta2
-
IDE:DevEco Studio 3.1 Beta2
-
SDK:Ohos_sdk_public 3.2.11.
5
(API Version 9 Release)
-
SDK:Ohos_sdk_public 3.2.11.
9
(API Version 9 Release)
## 实现原理
## 实现原理
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录