> 文档中心 > HarmonyOS应用开发培训三

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文件中:

  • 在事件回调中使用 e.target.attr.data 读取数据,e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后,通过attr.data 进行访问。

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

使用简写属性设置所有边框的样式,可选值为:

  • dotted:显示为一系列圆点,圆点半径为border-width的一半。
  • dashed:显示为一系列短的方形虚线。
  • 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不兼容,支持网络图片资源和本地图片资源地址。

示例:

  • background-image: url("/common/background.png")

    说明:不支持svg格式图片。

opacity

number

1

元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。

position

string

relative

设置元素的定位类型,不支持动态变更。

  • fixed:相对与整个界面进行定位。
  • absolute:相对于父元素进行定位。
  • relative:相对于其正常位置进行定位。

说明:absolute属性仅在父容器为

、时生效。

名称

类型

默认值

必填

描述

flex-direction

string

row

flex容器主轴方向。可选项有:

  • column:垂直方向从上到下。
  • row:水平方向从左到右。

flex-wrap

string

nowrap

flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:

  • nowrap:不换行,单行显示。
  • wrap:换行,多行显示。

justify-content

string

flex-start

flex容器当前行的主轴对齐格式。可选项有:

  • flex-start:项目位于容器的开头。
  • flex-end:项目位于容器的结尾。
  • center:项目位于容器的中心。
  • space-between:项目位于各行之间留有空白的容器内。
  • space-around:项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素,每个元素之间的间隔相等。

align-items

string

stretch

flex容器当前行的交叉轴对齐格式,可选值为:

  • stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。

align-content

string

flex-start

交叉轴中有额外的空间时,多行内容对齐格式,可选值为:

  • flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

display

string

flex

确定该元素视图框的类型,该值暂不支持动态修改。可选值为:

  • flex:弹性布局
  • grid:网格布局
  • none:不渲染此元素

3、通用常规事件

名称

参数

描述

是否支持冒泡

touchstart

TouchEvent

手指刚触摸屏幕时触发该事件。

是5+

touchmove

TouchEvent

手指触摸屏幕后移动时触发该事件。

是5+

touchcancel

TouchEvent

手指触摸屏幕中动作被打断时触发该事件。

是5+

touchend

TouchEvent

手指触摸结束离开屏幕时触发该事件。

是5+

click

-

点击动作触发该事件。

是6+

doubleclick7+

  

双击动作触发该事件

longpress

-

长按动作触发该事件。

focus

-

获得焦点时触发该事件,span组件无法获取焦点。

blur

-

失去焦点时触发该事件,span组件无法失去焦点。

key

KeyEvent

智慧屏特有的按键事件,当用户操作遥控器按键时触发。

  • 返回true表示页面自己处理按键事件。
  • 返回false表示使用默认的按键事件逻辑。
  • 不返回值作为false处理。

名称

参数

描述

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

侧边滑动栏的显示模式(当前只支持纵向):

  • off:不显示。
  • auto:按需显示(触摸时显示,2s后消失)。
  • on:常驻显示。

scrolleffect

string

spring

滑动效果,目前支持如下滑动效果:

  • spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
  • fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no:滑动到边缘后无效果。

indexer

boolean | Array

false

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时,索引栏会显示在列表右边界处。示例:

"indexer" : "true"表示使用默认字母索引表。

"indexer" : "false"表示无索引。

"indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。

说明:

  • indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性。

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容器中,可选值为:

  • column:主轴为纵向。
  • row:主轴为横向。

其他组件默认值为row,在list组件中默认值为column。

columns

number

1

list交叉轴方向的显示列数,默认为1列。

说明:设置多列时,在list交叉轴上进行均分,每一列大小相同。

align-items

string

stretch

list每一列交叉轴上的对齐格式,可选值为:

  • stretch:弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start:元素向交叉轴起点对齐。
  • flex-end:元素向交叉轴终点对齐。
  • center:元素在交叉轴居中。

    说明:align-items样式作用在每一列的子元素上,列与列之间采用均分方式布局。

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:

  • 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

滑动效果。目前支持如下:

  • spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
  • fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化
  • none:滑动到边缘后无效果。

    说明:该属性仅在loop属性为false时生效。

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

组件请求或者取消旋转表冠焦点,该方法参数可缺省,缺省时默认请求旋转表冠焦点。

说明:旋转表冠为穿戴设备特有硬件,用户可以通过旋转电源键来进行页面交互。