鸿蒙API14开发【div】JS组件

权限列表

样式

除支持组件[通用样式]外，还支持如下样式：

名称 类型 默认值 必填 描述 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：元素在交叉轴居中。 - baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 align-content string flex-start 否 交叉轴中有额外的空间时，多行内容对齐格式，可选值为： - flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。 - flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。 - center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。 - space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。 - space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 grid-template-[columns rows] string 1行1列 否 grid-[columns rows]-gap 0 否 grid-row-[start end] number - 否 grid-column-[start end] number - 否 grid-auto-flow5+ string - 否 使用框架自动布局算法进行网格的布局，可选值为： - row：逐行填充元素，如果行空间不够，则新增行； - column：逐列填充元素，如果列空间不够，则新增列。 overflow6+ string visible 否 设置元素内容区超过元素本身大小时的表现形式。 - visible：多个子元素内容超过元素大小时，显示在元素外面； - hidden：元素内容超过元素大小时，进行裁切显示； - scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。 overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 align-items6+ string - 否 设置容器中元素交叉轴上的对齐方式： - stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度； - flex-start：Flex布局容器内元素向交叉轴起点对齐； - flex-end：Flex布局容器内元素向交叉轴终点对齐； - center：Flex布局容器内元素在交叉轴居中对齐； - baseline：如Flex布局纵向排列，则该值与’flex-start’等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 scrollbar-color6+ - 否 设置滚动条的颜色。 scrollbar-width6+ - 否 设置滚动条的宽度。 overscroll-effect6+ string - 否 设置滚动边缘效果，可选值为： - spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹； - fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化； - none：滑动到边缘后无效果

事件

除支持[通用事件]外，还支持如下事件：

名称 参数 描述 reachstart6+ - 当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。 reachend6+ - 当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。 reachtop6+ - 当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。 reachbottom6+ - 当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

方法

除支持[通用方法外，还支持如下方法：

名称 参数 返回值 描述 getScrollOffset6+ - ScrollOffset 获取元素内容的滚动偏移。 需要设置overflow样式为scroll。 scrollBy6+ ScrollParam - 指定元素内容的滚动偏移。 需要设置overflow样式为scroll。

表1 ScrollOffset6+

名称 类型 描述 x number 在x轴方向的偏移，单位为px。 y number 在y轴方向的偏移，单位为px。

表2 ScrollParam6+

名称 类型 描述 dx number 水平方向滑动的偏移量，单位px。 dy number 垂直方向滑动的偏移量，单位px。 smooth boolean 是否平滑处理。

示例

1. Flex样式

    
    
    
    
    
   html

   /* xxx.css */.container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px;}.flex-box { justify-content: space-around; align-items: center; width: 400px; height: 140px; background-color: #ffffff;}.flex-item { width: 120px; height: 120px; border-radius: 16px;}.color-primary { background-color: #007dff;}.color-warning { background-color: #ff7500;}.color-success { background-color: #41ba41;}css

   

2. Flex Wrap样式

    
    
    
    
    
   html

   /* xxx.css */.container { flex-direction: column; justify-content: center; align-items: center; width: 454px; height: 454px;}.flex-box { justify-content: space-around; align-items: center; flex-wrap: wrap; width: 300px; height: 250px; background-color: #ffffff;}.flex-item { width: 120px; height: 120px; border-radius: 16px;}.color-primary { background-color: #007dff;}.color-warning { background-color: #ff7500;}.color-success { background-color: #41ba41;}css

   

3. Grid样式

    
    
    
    
   html

   /* xxx.css */.common { width: 400px; height: 400px; background-color: #ffffff; align-items: center; justify-content: center; margin: 24px;}.grid-parent { display: grid; grid-template-columns: 35% 35%; grid-columns-gap: 24px; grid-rows-gap: 24px; grid-template-rows: 35% 35%;}.grid-child { width: 100%; height: 100%; border-radius: 8px;}.grid-left-top { grid-row-start: 0; grid-column-start: 0; grid-row-end: 0; grid-column-end: 0; background-color: #3f56ea;}.grid-left-bottom { grid-row-start: 1; grid-column-start: 0; grid-row-end: 1; grid-column-end: 0; background-color: #00aaee;}.grid-right-top { grid-row-start: 0; grid-column-start: 1; grid-row-end: 0; grid-column-end: 1; background-color: #00bfc9;}.grid-right-bottom { grid-row-start: 1; grid-column-start: 1; grid-row-end: 1; grid-column-end: 1; background-color: #47cc47;}css

   

4. 拖拽7+

    <div class=\"content\" ondragstart=\"dragstart\" ondrag=\"drag\" ondragend=\"dragend\" style=\"position: absolute;left: {{left}};top: {{top}};\"> 

 /* xxx.css */ .container { flex-direction: column; width: 100%; height: 100%; } .content { width: 200px; height: 200px; background-color: red; }css

// xxx.jsimport promptAction from \'@ohos.promptAction\';export default { data:{ left:0, top:0, }, dragstart(e){ prompt.showToast({ message: \'Start to be dragged\' }) }, drag(e){ this.left = e.globalX; this.top = e.globalY; }, dragend(e){ promptAction.showToast({ message: \'End Drag\' }) }}js

 <div class=\"content\" ondrag=\"drag\" style=\"position: absolute;left: {{left}};top: {{top}};\">