Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 2eb82e1e 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11732 文档整改 挑单--11680 

Merge pull request !11732 from wangshuainan1/OpenHarmony-3.1-Release
上级 6f1f832b 69ecfe7c
隐藏空白更改
内联 并排
Showing with 125 addition and 114 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 2eb82e1e
......@@ -211,24 +211,24 @@
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
gradient: true
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
display: false
},
yAxis: {
min: 0,
max: 1000,
display: false,
display: false
},
series: {
lineStyle: {
width: "5px",
smooth: true,
smooth: true
},
headPoint: {
shape: "circle",
......@@ -236,14 +236,14 @@
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
display: true
},
loop: {
margin: 2,
gradient: true,
gradient: true
}
}
},
}
},
addData() {
this.$refs.linechart.append({
......@@ -294,15 +294,15 @@
barData: [
{
fillColor: '#f07826',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
},
{
fillColor: '#cce5ff',
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
},
{
fillColor: '#ff88bb',
data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
},
],
barOps: {
......@@ -310,14 +310,14 @@
min: 0,
max: 20,
display: false,
axisTick: 10,
axisTick: 10
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
},
display: false
}
}
}
}
```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ 2eb82e1e
......@@ -108,9 +108,6 @@ export default {
this.qr_type = 'circle'
}
},
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) {
this.qr_col = e.newValue
},
......@@ -122,4 +119,3 @@ export default {
![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif)
zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ 2eb82e1e
......@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void
| repeat | 动画重播事件。 |
- 示例
```
<!-- xxx.hml -->
<div class="container">
<div id="idName" class="box"></div>
<div class="buttonBox">
<button @click="start">
start
</button>
<button @click="cancel">
cancels
</button>
</div>
```html
<!-- xxx.hml -->
<div class="container">
<div id="idName" class="box"></div>
<div class="buttonBox">
<button @click="start">
start
</button>
<button @click="cancel">
cancel
</button>
</div>
```
```
```
/* xxx.css */
......
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ 2eb82e1e
......@@ -67,4 +67,3 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 通用样式都不是必填项。
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 2eb82e1e
......@@ -59,12 +59,12 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
jump() {
router.push({
// 路径要与config.json配置里面的相同
uri: 'pages/detailpage',
url: 'pages/detailpage',
});
},
}
......@@ -92,7 +92,7 @@ export default {
```js
// xxx.js
import router from '@system.router';
import router from '@ohos.router';
export default {
jumpBack() {
router.back();
......@@ -138,7 +138,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
<text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
</div>
<list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})">
<list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
<text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
</list-item>
</list>
......@@ -147,19 +147,19 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
```js
// xxx.js
import router from '@system.router'
import router from '@ohos.router'
export default {
data: { list: [] },
onInit() {
for(var i = 0; i < 10; i++) {
var item = { uri: "pages/card_transition/target_page/index",
var item = { url: "pages/card_transition/target_page/index",
title: "this is title" + i, id: "item_" + i }
this.list.push(item);
}
},
jumpPage(id, uri) {
jumpPage(id, url) {
var cardId = this.$element(id).ref;
router.push({ uri: uri, params : { ref : cardId } });
router.push({ url: url, params : { ref : cardId } });
}
}
```
......@@ -167,6 +167,8 @@ export default {
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #ABDAFF;
......@@ -197,6 +199,8 @@ export default {
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #EBFFD7;
......@@ -255,14 +259,14 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
```js
<!-- xxx.js -->
import router from '@system.router';
import router from '@ohos.router';
export default {
data: {
},
jump() {
router.push({
uri:'pages/transition2/transition2'
url:'pages/transition2/transition2'
})
}
}
......@@ -325,7 +329,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
```js
<!-- xxx.js -->
import router from '@system.router';
import router from '@ohos.router';
export default {
data: {
......@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
router.back()
}
}
```
```css
```
```css
<!-- xxx.css -->
.container {
flex-direction: column;
......@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
}
```
![transition](figures/transition.gif)
![transition](figures/transition.gif)
zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ 2eb82e1e
......@@ -37,10 +37,8 @@ export default {
console.log("组件创建")
},
onAttached() {
this.value = "组件挂载"
},
onDetached() {
this.value = ""
this.value = "组件挂载",
console.log("组件挂载")
},
onShow() {
console.log("Page显示")
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ 2eb82e1e
......@@ -37,7 +37,7 @@
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ 2eb82e1e
......@@ -193,6 +193,7 @@ transform动效，支持的组件范围：
dur="3s" repeatCount="indefinite"></animateTransform>
</rect>
<text x="20" y="700" fill="#D2691E" font-size="40">
animate-transform
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
dur="3s" repeatCount="indefinite"></animateTransform>
</text>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 2eb82e1e
......@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
<path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path>
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
<text>
<textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" >
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
This is TextPath.
<tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
<tspan font-size="30px">Let's play.</tspan>
......@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path>
<!-- 数值百分比 -->
<text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan x="50" fill="blue">This is first tspan.</tspan>
<tspan x="50%">This is second tspan.</tspan>
......@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan x="50" fill="blue">
tspan attribute x|rotate
......@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red"
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan dx="20" fill="blue">
tspan attribute fill|fill-opacity
......@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
<path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red"
<path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none">
</path>
<text>
<textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px">
<textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath.
<tspan dx="20" fill="blue">
tspan attribute stroke
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 2eb82e1e
......@@ -73,6 +73,23 @@ struct AnimateToExample {
}
this.flag = !this.flag
})
Button('change rotate angle')
.margin(50)
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
.onClick(() => {
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // 设置-1表示动画无限循环
playMode: PlayMode.AlternateReverse,
onFinish: () => {
console.info('play end')
}
}, () => {
this.rotateAngle = 90
})
})
}.width('100%').margin({ top: 5 })
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 2eb82e1e
......@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换
```ts
// xxx.ets
@Extend(Text) function textStyle () {
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
}
@Entry
@Component
struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];
@State text: string = '';
@State bool: boolean = false;
@State appleVisible: Visibility = Visibility.Visible;
@State orangeVisible: Visibility = Visibility.Visible;
@State bananaVisible: Visibility = Visibility.Visible;
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = ''
@State bool: boolean = true
@State eventType: string = ''
@State appleVisible: Visibility = Visibility.Visible
@State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible
private dragList: string[] = ['apple', 'orange', 'banana']
@State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]
@State index: number = 0
// 自定义拖拽过程中显示的内容
@Builder pixelMapBuilder() {
......@@ -74,46 +86,29 @@ struct DragExample {
.textAlign(TextAlign.Start)
.margin(5)
Row({ space: 15 }) {
Text('apple')
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.appleVisible)
.onDragStart(() => {
this.bool = true;
this.text = 'apple';
this.appleVisible = Visibility.None;
return this.pixelMapBuilder;
})
Text('orange')
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.orangeVisible)
.onDragStart(() => {
this.bool = true;
this.text = 'orange';
this.orangeVisible = Visibility.None;
return this.pixelMapBuilder;
})
Text('banana')
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.bananaVisible)
.onDragStart((event: DragEvent, extraParams: string) => {
console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
this.bool = true;
this.text = 'banana';
this.bananaVisible = Visibility.None;
return this.pixelMapBuilder;
})
ForEach(this.dragList, (item, index) => {
Text(item)
.textStyle()
.visibility(this.fruitVisible[index])
.onDragStart(() => {
this.bool = true
this.text = item
this.fruitVisible[index] = Visibility.None
return this.pixelMapBuilder
})
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.eventType = 'Down'
this.index = index
}
if (event.type === TouchType.Up) {
this.eventType = 'Up'
if (this.bool) {
this.fruitVisible[index] = Visibility.Visible
}
}
})
})
}.padding({ top: 10, bottom: 10 }).margin(10)
Text('This is a List element')
......@@ -142,21 +137,22 @@ struct DragExample {
.padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => {
console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
})
.onDragMove((event: DragEvent, extraParams: string) => {
console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
})
.onDragLeave((event: DragEvent, extraParams: string) => {
console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
})
.onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams);
let jsonString = JSON.parse(extraParams);
if (this.bool) {
// 通过splice方法插入元素
this.numbers.splice(jsonString.insertIndex, 0, this.text);
this.bool = false;
this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false
}
this.fruitVisible[this.index] = Visibility.None
})
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或