HarmonyOS应用开发培训三
一、div的使用
基础容器,用作页面结构的根节点或将内容进行分组。
1、通用常规属性
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
id |
string |
- |
否 |
组件的唯一标识。 |
style |
string |
- |
否 |
组件的样式声明。 |
class |
string |
- |
否 |
组件的样式类,用于引用样式表。 |
ref |
string |
- |
否 |
用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。 |
disabled |
boolean |
false |
否 |
当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。 |
focusable |
boolean |
false |
否 |
当前组件是否可以获取焦点。 当focusable设置为true时,组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时,框架会设置该属性为true。 |
data |
string |
- |
否 |
给当前组件设置data属性,进行相应的数据存储和读取。JS文件中:
|
2、通用常规样式
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
width |
| |
- |
设置组件自身的宽度。 缺省时使用元素自身内容需要的宽度。 |
height |
| |
- |
设置组件自身的高度。 缺省时使用元素自身内容需要的高度。 |
padding |
| 5+ |
0 |
使用简写属性设置所有的内边距属性。 该属性可以有1到4个值:
|
margin |
| 5+ |
0 |
使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
|
border |
- |
0 |
使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。 |
border-style |
string |
solid |
使用简写属性设置所有边框的样式,可选值为:
|
border-width |
|
0 |
使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。 |
border-color |
|
black |
使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。 |
border-radius |
|
- |
border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。 说明:顺序为左下、右下、左上和右上。 |
background |
|
- |
仅支持设置渐变样式,与background-color、background-image不兼容。 |
background-color |
|
- |
设置背景颜色。 |
background-image |
string |
- |
设置背景图片。与background-color、background不兼容,支持网络图片资源和本地图片资源地址。 示例:
|
opacity |
number |
1 |
元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
position |
string |
relative |
设置元素的定位类型,不支持动态变更。
说明:absolute属性仅在父容器为 、时生效。
|
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
flex-direction |
string |
row |
否 |
flex容器主轴方向。可选项有:
|
flex-wrap |
string |
nowrap |
否 |
flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:
|
justify-content |
string |
flex-start |
否 |
flex容器当前行的主轴对齐格式。可选项有:
|
align-items |
string |
stretch |
否 |
flex容器当前行的交叉轴对齐格式,可选值为:
|
align-content |
string |
flex-start |
否 |
交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
|
display |
string |
flex |
否 |
确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
|
3、通用常规事件
名称 |
参数 |
描述 |
是否支持冒泡 |
---|---|---|---|
touchstart |
TouchEvent |
手指刚触摸屏幕时触发该事件。 |
是5+ |
touchmove |
TouchEvent |
手指触摸屏幕后移动时触发该事件。 |
是5+ |
touchcancel |
TouchEvent |
手指触摸屏幕中动作被打断时触发该事件。 |
是5+ |
touchend |
TouchEvent |
手指触摸结束离开屏幕时触发该事件。 |
是5+ |
click |
- |
点击动作触发该事件。 |
是6+ |
doubleclick7+ |
双击动作触发该事件 |
否 |
|
longpress |
- |
长按动作触发该事件。 |
否 |
focus |
- |
获得焦点时触发该事件,span组件无法获取焦点。 |
否 |
blur |
- |
失去焦点时触发该事件,span组件无法失去焦点。 |
否 |
key |
KeyEvent |
智慧屏特有的按键事件,当用户操作遥控器按键时触发。
|
否 |
名称 |
参数 |
描述 |
---|---|---|
reachstart6+ |
- |
当页面滑动到最开始的点时触发的事件回调,当flex-direction: row时才会触发。 |
reachend6+ |
- |
当页面滑动到最末尾的点时触发的事件回调,当flex-direction: row时才会触发。 |
reachtop6+ |
- |
当页面滑动到最上部的点时触发的事件回调,当flex-direction: column时才会触发。 |
reachbottom6+ |
- |
当页面滑动到最下部的点时触发的事件回调,当flex-direction: column时才会触发。 |
4、通用常规方法
-
focus 组件请求或者取消焦点,该方法参数可缺省,缺省时默认请求焦点。仅支持focusable属性的组件支持该方法,在首页的生命周期方法内不生效,可在onActive中延迟(100-500ms左右)调用focus方法实现输入框在首页中自动获焦。
-
animate 动画效果
参数名
参数类型
必填
描述
keyframes
keyframes
是
设置动画样式
options
Options
是
用于设置动画属性的对象列表。options请见Options说明
-
getBoundingClientRect 获取元素的大小及其相对于窗口的位置。
-
createIntersectionObserver 监听元素在当前页面的可见范围。
-
getScrollOffset6+ 获取元素内容的滚动偏移。
-
scrollBy6+ 指定元素内容的滚动偏移。
二、list的使用
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
其子组件仅支持和。
1、通用常规属性
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
scrollpage |
boolean |
false |
否 |
设置为true时,将 list 顶部页面中非 list 部分随 list 一起滑出可视区域,当list方向为row时,不支持此属性。 |
cachedcount |
number |
0 |
否 |
长列表延迟加载时list-item最少缓存数量。 可视区域外缓存的list-item数量少于该值时,会触发requestitem事件。 |
scrollbar |
string |
off |
否 |
侧边滑动栏的显示模式(当前只支持纵向):
|
scrolleffect |
string |
spring |
否 |
滑动效果,目前支持如下滑动效果:
|
indexer |
boolean | Array |
false |
否 |
是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时,索引栏会显示在列表右边界处。示例: "indexer" : "true"表示使用默认字母索引表。 "indexer" : "false"表示无索引。 "indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。 说明:
|
2、通用常规样式
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
divider-color5+ |
|
transparent |
否 |
item分隔线颜色,仅当list的divider属性为true时生效。 |
divider-height5+ |
|
1 |
否 |
item分隔线高度,仅当list的divider属性为true时生效。 |
divider-length5+ |
|
主轴宽度 |
否 |
item分隔线长度,不设置时最大长度为主轴宽度,具体长度取决于divider-origin,仅当list的divider属性为true时生效。 |
divider-origin5+ |
|
0 |
否 |
item分隔线相对于item主轴起点位置的偏移量,仅当list的divider属性为true时生效。 |
flex-direction |
string |
column |
否 |
设置flex容器主轴的方向,指定flex项如何放置在flex容器中,可选值为:
其他组件默认值为row,在list组件中默认值为column。 |
columns |
number |
1 |
否 |
list交叉轴方向的显示列数,默认为1列。 说明:设置多列时,在list交叉轴上进行均分,每一列大小相同。 |
align-items |
string |
stretch |
否 |
list每一列交叉轴上的对齐格式,可选值为:
|
item-extent |
| |
- |
否 |
设置内部item为固定大小,设置为百分比格式时,指相对于list的视口主轴方向长度的百分比。 |
fade-color |
|
grey |
否 |
设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
scrollbar-color6+ |
|
- |
否 |
设置滚动条的颜色。 |
scrollbar-width6+ |
|
- |
否 |
设置滚动条的宽度。 |
scrollbar-offset6+ |
|
0 |
否 |
设置滚动条距离List默认位置的偏移量,只支持正数,默认位置在List右边缘,可以通过这个偏移量调整滚动条的水平位置,如果滚动条绘制在list外部,而list父组件有裁剪,会导致滚动条被裁剪。 |
3、通用常规事件
名称 |
参数 |
描述 |
---|---|---|
indexerchange5+ |
{ local: booleanValue } |
多语言索引条切换事件,仅当indexer属性为true,indexermulti为true时生效。booleanValue可能值为true或者false:
|
scroll |
{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue } |
列表滑动的偏移量和状态回调。 stateValue: 0表示列表滑动已经停止。 stateValue: 1表示列表正在用户触摸状态下滑动。 stateValue: 2表示列表正在用户松手状态下滑动。 |
scrollbottom |
- |
当前列表已滑动到底部位置。 |
scrolltop |
- |
当前列表已滑动到顶部位置。 |
scrollend |
- |
列表滑动已经结束。 |
scrolltouchup |
- |
手指已经抬起且列表仍在惯性滑动。 |
requestitem |
- |
请求创建新的list-item。 长列表延迟加载时,可视区域外缓存的list-item数量少于cachedcount时,会触发该事件。 |
rotate7+ |
{ rotateValue: number } |
返回表冠旋转角度增量值,仅智能穿戴支持。 |
4、通用常规方法
名称 |
参数 |
描述 |
---|---|---|
scrollTo |
{ index: number(指定位置) } |
list滑动到指定index的item位置。 |
scrollBy |
ScrollParam |
触发list滑动一段距离。 智慧屏特有方法。 |
scrollTop |
{ smooth: boolean } |
smooth缺省为false,表示直接滚动到顶部。 smooth为true,表示平滑滚动到顶部。 |
scrollBottom |
{ smooth: boolean } |
smooth缺省为false,表示直接滚动到底部。 smooth为true,表示平滑滚动到底部。 |
scrollPage |
{ reverse: boolean, smooth: boolean } |
reverse缺省值为false,表示下一页,无完整页则滚动到底部。 reverse为true,表示上一页,无完整页则滚动到顶部。 smooth缺省值为false,表示直接滚动一页。 smooth为true,表示平滑滚动一页。 |
scrollArrow |
{ reverse: boolean, smooth: boolean } |
reverse缺省值为false,表示向底部方向滑动一段距离,无足够距离则滚动到底部。 reverse为true,表示向顶部方向滑动一段距离,无足够距离则滚动到顶部。 smooth缺省值为false,表示直接滚动。 smooth为true,表示平滑滚动。 |
collapseGroup |
{ groupid: string } |
收拢指定的group。 groupid:需要收拢的group的id。 当groupid未指定时收拢所有的group。 |
expandGroup |
{ groupid: string } |
展开指定的group。 groupid:需要展开的group的id。 当groupid未指定时展开所有的group。 |
currentOffset |
- |
返回当前滑动的偏移量。返回值类型是Object。 |
rotation |
FocusParam |
组件请求或者取消旋转表冠焦点,该方法参数可缺省,缺省时默认请求旋转表冠焦点。 说明:旋转表冠为穿戴设备特有硬件,用户可以通过旋转电源键来进行页面交互。 |
二、swiper的使用
滑动容器,提供切换子组件显示的能力。
其子组件支持除之外的子组件。
1、通用常规属性
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
index |
number |
0 |
否 |
当前在容器中显示的子组件的索引值。 |
autoplay |
boolean |
false |
否 |
子组件是否自动播放,自动播放状态下,导航点不可操作5+。 |
interval |
number |
3000 |
否 |
使用自动播放时播放的时间间隔,单位为ms。 |
indicator |
boolean |
true |
否 |
是否启用导航点指示器,默认true。 |
digital5+ |
boolean |
false |
否 |
是否启用数字导航点,默认为false。 说明 必须设置indicator时才能生效数字导航点。 |
indicatormask |
boolean |
false |
否 |
是否采用指示器蒙版,设置为true时,指示器会有渐变蒙版出现。 说明:手机上不生效5+。 |
indicatordisabled5+ |
boolean |
false |
否 |
指示器是否禁止用户手势操作,设置为true时,指示器不会响应用户的点击拖拽。 |
loop |
boolean |
true |
否 |
是否开启循环滑动。 |
duration |
number |
- |
否 |
子组件切换的动画时长。 |
vertical |
boolean |
false |
否 |
是否为纵向滑动,纵向滑动时采用纵向的指示器。 |
cachedsize7+ |
number |
-1 |
否 |
swiper延迟加载时item最少缓存数量。-1表示全部缓存。 |
scrolleffect7+ |
string |
spring |
否 |
滑动效果。目前支持如下:
|
displaymode7+ |
string |
stretch |
否 |
设置当swiper容器在主轴上尺寸(水平滑动时为宽度,纵向滑动时为高度)大于子组件时,在swiper里的呈现方式。可选值: "stretch":拉伸子组件主轴上尺寸与Swiper容器一样大。 "autoLinear":保持子组件本身大小线性排列在Swiper容器里。 |
2、通用常规样式
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
indicator-color |
|
- |
否 |
导航点指示器的填充颜色。 |
indicator-selected-color |
|
手机:#ff007dff 智慧屏:#ffffffff 智能穿戴:#ffffffff |
否 |
导航点指示器选中的颜色。 |
indicator-size |
|
4px |
否 |
导航点指示器的直径大小。 |
indicator-top|left|right|bottom |
| |
- |
否 |
导航点指示器在swiper中的相对位置。 |
next-margin7+ |
| |
- |
否 |
后边距,用于露出后一项的一小部分。 |
previous-margin7+ |
| |
- |
否 |
前边距,用于露出前一项的一小部分。 |
3、通用常规事件
名称 |
参数 |
描述 |
---|---|---|
change |
{ index: currentIndex } |
当前显示的组件索引变化时触发该事件。 |
rotation |
{ value: rotationValue } |
智能穿戴表冠旋转事件触发时的回调。 |
animationfinish7+ |
- |
动画结束时触发该事件。 |
4、通用常规方法
名称 |
参数 |
描述 |
---|---|---|
swipeTo |
{ index: number(指定位置) } |
切换到index位置的子组件。 |
showNext |
无 |
显示下一个子组件。 |
showPrevious |
无 |
显示上一个子组件。 |
rotation |
FocusParam |
组件请求或者取消旋转表冠焦点,该方法参数可缺省,缺省时默认请求旋转表冠焦点。 说明:旋转表冠为穿戴设备特有硬件,用户可以通过旋转电源键来进行页面交互。 |