权限列表

样式

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

名称 类型 默认值 必填 描述
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样式

    <!-- xxx.hml -->
<div class="container">
  <div class="flex-box">
    <div class="flex-item color-primary"></div>
    <div class="flex-item color-warning"></div>
    <div class="flex-item color-success"></div>
  </div>
</div>
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样式

    <!-- xxx.hml -->
<div class="container">
  <div class="flex-box">
    <div class="flex-item color-primary"></div>
    <div class="flex-item color-warning"></div>
    <div class="flex-item color-success"></div>
  </div>
</div>
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样式

    <!-- xxx.hml -->
<div class="common grid-parent">
  <div class="grid-child grid-left-top"></div>
  <div class="grid-child grid-left-bottom"></div>
  <div class="grid-child grid-right-top"></div>
  <div class="grid-child grid-right-bottom"></div>
</div>
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+

    <!-- xxx.hml -->
<div class="container">
  <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};">
  </div>
</div>
html

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

    // xxx.js
import 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

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    <!-- xxx.hml -->
<div class="container">
  <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div>
  <div style="width: 500px; height: 500px; background-color: yellow; position: fixed; left: 15%; top: 30%; opacity:0.3"
    ondragenter="dragenter" ondragover="dragover" ondragleave="dragleave" ondrop="drop">
  </div>
</div>
html

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

    // xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data:{
    left:0,
    top:0,
  },
  drag(e){
    this.left = e.globalX;
    this.top = e.globalY;
  },
  dragenter(e){
    promptAction.showToast({
      message: 'enter'
    })
  },
  dragover(e){
    promptAction.showToast({
      message: 'over'
    })
  },
  dragleave(e){
    promptAction.showToast({
      message: 'leave'
    })
  },
  drop(e){
    promptAction.showToast({
      message: 'drop'
    })
  }
}
js

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  5. 手指捏合7+

    <!-- xxx.hml -->
<div class="container">
  <div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
    onpinchcancel="pinchcancel"> 
  </div>
</div>
html

    /* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 454px;
  height: 454px;
}
.content {
  width: 400px;
  height: 400px;
  background-color: aqua;
  margin: 30px;
}
css

    // xxx.js
import promptAction from '@ohos.promptAction';
export default {
  pinchstart(e){
    promptAction.showToast({
      message: 'pinchstart!!!'
    })
  },
  pinchupdate(e){
    promptAction.showToast({
      message: 'Two-finger pinch update'
    })
  },
  pinchend(e){
    promptAction.showToast({
      message: 'Finished with two fingers pinching'
    })
  },
  pinchcancel(e){
    promptAction.showToast({
      message: 'Finger pinching is interrupted'
    })
  }
}
js

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

加入鸿蒙学习阵营！

除了本文，面费领《HarmonyOS应用开发》+《鸿蒙openharmony系统开发大全》 等入门进阶资料！关注我的CSDN主页，持续获取：
在这里插入图片描述

最新鸿蒙技术文章
独家项目实战教程
免费直播/训练营信息
👉 下方资源区已为你备好！

# javascript # 开发语言 # ecmascript # harmonyos # 鸿蒙系统
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙分布式文件系统开发完全指南

本文旨在为开发者提供鸿蒙分布式文件系统的全面开发指南，涵盖从基础概念到高级应用的所有关键知识点。我们将重点介绍分布式文件系统的架构设计、API使用、性能优化和实际开发案例。本文将按照从理论到实践的路径组织内容，首先介绍核心概念，然后深入技术细节，最后通过实际案例展示开发过程。分布式文件系统：一种允许跨多个设备透明访问文件的系统架构HarmonyOS：华为开发的分布式操作系统软总线：鸿蒙系统中实现设

avatar HarmonyOS开发者社区

HarmonyOS桌面快捷功能开发指南：从原理到实战

新建。

avatar HarmonyOS开发者社区

鸿蒙应用开发—通过标准化数据通路实现数据共享

在多对多跨应用数据共享的场景下，需要提供一条数据通路能够接入多个不同应用的数据并共享给其他应用进行读取。UDMF针对多对多跨应用数据共享的不同业务场景提供了标准化的数据通路，提供了标准化的数据接入与读取接口。标准化数据通路是为各种业务场景提供的跨应用的数据接入与读取通路，它可以暂存应用需要共享的符合标准化数据定义的统一数据对象，并提供给其他应用进行访问，同时按照一定的策略对暂存数据的访问权限和生命

avatar HarmonyOS开发者社区