HarmonyOS API：容器组件

joytrian

发布于 2023-3-28 15:30

浏览

0收藏

版本：v3.1 Beta

popup

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。

权限列表

无

子组件

支持单个子组件节点⁵⁺。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
target	string	-	是	popup绑定目标元素的id属性值，不支持动态切换。
placement	string	bottom	否	popup相对于目标元素的位置。可选值为： - left：位于目标元素左边； - right：位于目标元素右边； - top：位于目标元素上边； - bottom：位于目标元素下边； - topLeft：位于目标元素左上角； - topRight：位于目标元素右上角； - bottomLeft：位于目标元素左下角； - bottomRight：位于目标元素右下角。
keepalive⁵⁺	boolean	false	否	设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。
clickable⁵⁺	boolean	true	否	popup是否支持点击目标元素弹窗，当设置为false时，只支持方法调用显示弹窗。
arrowoffset⁵⁺	<length>	0	否	popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。

说明

不支持focusable属性。

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
mask-color	<color>	-	否	遮罩层的颜色，默认值为全透明。

说明

不支持position相关样式。

事件

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

名称	参数	描述
visibilitychange	{ visibility: boolean }	当气泡弹出和消失时会触发该回调函数。

方法

仅支持如下方法：

名称	参数	描述
show⁵⁺	-	弹出气泡提示。
hide⁵⁺	-	隐藏气泡提示。

说明

popup气泡弹窗属性、样式均不支持动态更新。
popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
popup的border四边样式需一致，若四边设置不一致且圆角为零，则按左、上、右、下的顺序取第一个被设置的样式，否则border不生效。
popup的target组件的click事件不生效。

示例

<!-- xxx.hml -->
<div class="container">
  <text id="text">Click to show the pop-up</text>
  <!-- popup supports single child of any type5+ -->
  <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" 
    arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
    <text class="text">Text content of the pop-up</text>
  </popup>
  <button class="button" onclick="showpopup">Click to show the pop-up</button>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  padding-top: 200px;
}
.popup {
  mask-color: gray;
}
.text {
  color: white;
}
.button {
  width: 220px;
  height: 70px;
  margin-top: 50px;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

// xxx.js
import promptAction from '@ohos.promptAction'
export default {
  visibilitychange(e) {
    promptAction.showToast({
      message: 'visibility change visibility: ' + e.visibility,
        duration: 3000
    }); 
  },
  showpopup() {
    this.$element("popup").show();
  },
  hidepopup() {
    this.$element("popup").hide();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

HarmonyOS API：容器组件-鸿蒙开发者社区

refresh

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

下拉刷新容器。

权限列表

无

子组件

支持。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
offset	<length>	-	否	刷新组件静止时距离父组件顶部的距离。
refreshing	boolean	false	否	标识刷新组件当前是否正在刷新。
type	string	auto	否	设置组件刷新时的动效。两个可选值，不支持动态修改。 - auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。 - pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。
lasttime	boolean	false	否	设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。
timeoffset⁶⁺	<length>	-	否	设置更新时间距离父组件顶部的距离。
friction	number	42	否	下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
background-color	<color>	white	否	设置刷新组件的背景颜色。
progress-color	<color>	black	否	设置刷新组件的loading图标颜色。

事件

仅支持如下事件：

名称	参数	描述
refresh	{ refreshing: refreshingValue }	下拉刷新状态变化时触发。可能值： - false：当前处于下拉刷新过程中。 - true：当前未处于下拉刷新过程中。
pulldown	{ state: string }	下拉开始和松手时触发。可能值： - start：表示开始下拉。 - end：表示结束下拉。

方法

不支持通用方法。

示例

<!-- xxx.hml -->
<div class="container">
  <refresh refreshing="{{fresh}}" onrefresh="refresh">
    <list class="list" scrolleffect="no">
      <list-item class="listitem" for="list">
        <div class="content">
          <text class="text">{{$item}}</text>
        </div>
      </list-item>
    </list>
  </refresh>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  height: 100%;
}

.listitem {
  width: 100%;
  height: 150px;
}

.content {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text {
  font-size: 35px;
  font-weight: bold;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data: {
    list:[],
    fresh:false
  },
  onInit() {
    this.list = [];
    for (var i = 0; i <= 3; i++) {
      var item = '列表元素' + i;
      this.list.push(item);
    }
  },
  refresh: function (e) {
    promptAction.showToast({
      message: '刷新中...'
    })
    var that = this;
    that.fresh = e.refreshing;
    setTimeout(function () {
      that.fresh = false;
      var addItem = '更新元素';
      that.list.unshift(addItem);
      promptAction.showToast({
        message: '刷新完成!'
      })
    }, 2000)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

HarmonyOS API：容器组件-鸿蒙开发者社区

stack

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

权限列表

无

子组件

支持。

示例

<!-- xxx.hml -->
<stack class="stack-parent">
  <div class="back-child bd-radius"></div>
  <div class="positioned-child bd-radius"></div>
  <div class="front-child bd-radius"></div>
</stack>1.
2.
3.
4.
5.
6.

/* xxx.css */
.stack-parent {
  width: 400px;
  height: 400px;
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
}
.back-child {
  width: 300px;
  height: 300px;
  background-color: #3f56ea;
}
.front-child {
  width: 100px;
  height: 100px;
  background-color: #00bfc9;
}
.positioned-child {
  width: 100px;
  height: 100px;
  left: 50px;
  top: 50px;
  background-color: #47cc47;
}
.bd-radius {
  border-radius: 16px;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

HarmonyOS API：容器组件-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-container-stack-0000001427902516-V3?catalogVersion=V3#ZH-CN_TOPIC_0000001427902516__示例

分类

卡片开发

三方库

标签

HarmonyOS API

已于2023-3-28 15:30:23修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：容器组件

popup

权限列表

子组件

属性

样式

事件

方法

示例

refresh

权限列表

子组件

属性

样式

事件

方法

示例

stack

权限列表

子组件

属性

样式

事件

方法

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看