「华为鸿蒙应用开发 14」JavaScript UI全部容器组件的基本用法汇总

大家好，欢迎来到IT知识分享网。

前面的章节已经介绍了常用容器组件List、Dialog、Form、Stepper、Tabs和基础组件Text、Button、Input、Picker、Image，本章节将进一步介绍鸿蒙应用程序开发的方舟界面（ArkUI）框架中所有的前面章节中没有介绍到的全部容器组件，了解其基本用法。这样就可以在以后的实际项目开发中做到心中有数。

1 badge：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。

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

BadgeConfig的相关配置属性：

示例：

<!-- badgepage.hml -->
<div class="container">
    <badge config="{{badgeConfig}}" visible="true" count="100"
           maxcount="99" placement="right">
        <text class="text1">示例</text>
    </badge>
    <badge visible="true" count="0">
        <text class="text2">示例</text>
    </badge>
</div>

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

badge {
    width: 50%;
    margin-top: 100px;
}

text {
    font-size: 50px;
}

.text1 {
    background-color: orange;
}

.text2 {
    background-color: aqua;
}

// badgepage.js
export default {
    data: {
        badgeConfig: {
            badgeColor: '#0a59f7',
            textSize: '20px',
            badgeSize: '25px'
        }
    }
}

2 panel：可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。仅支持手机，平板。

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

说明

• 不支持渲染属性，包括for、if和show。
• 不支持focusable和disabled属性。

仅支持如下事件：

仅支持如下方法：

示例：

<!-- panelpage.hml -->
<div class="container">
    <button type="capsule" value="打开面板" onclick="showPanel"></button>
    <panel id="panel" type="foldable" mode="half"
           @sizechange="changeMode" miniheight="200px">
        <div class="panel-div">
            <div class="inner-txt">
                <text class="txt">面板类型为： {{modeFlag}}</text>
            </div>
            <div class="inner-btn">
                <button type="capsule" value="关闭面板" onclick="closePanel"></button>
            </div>
        </div>
    </panel>
</div>

/* panelpage.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button {
    height: 50px;
    font-size: 30px;
}

text {
    font-size: 40px;
}

.panel-div {
    flex-direction: column;
    align-items: center;
}

.inner-txt {
    width: 100%;
    height: 160px;
    justify-content: center;
}

.inner-btn {
    width: 100%;
    height: 120px;
    justify-content: center;
}

// panelpage.js
export default {
    data: {
        modeFlag: 'half'
    },
    showPanel() {
        this.$element('panel').show();
    },
    closePanel() {
        this.$element('panel').close();
    },
    changeMode(e) {
        this.modeFlag = e.mode;
    }
}

3 popup：气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。

弹出窗口位置placement。可选值为：

• left：位于目标元素左边；
• right：位于目标元素右边；
• top：位于目标元素上边；
• bottom：位于目标元素下边；
• topLeft：位于目标元素左上角；
• topRight：位于目标元素右上角；
• bottomLeft：位于目标元素左下角；
• bottomRight：位于目标元素右下角。

除支持通用事件外，还支持事件

仅支持如下方法：

<!-- popuppage.hml -->
<div class="container">
    <div class="container">
        <text id="text">这里会显示气泡弹窗</text>
    <!-- popup supports single child of any type5+ -->
        <popup id="popup" class="popup" target="text"
               placement="top" keepalive="true" clickable="true"
               arrowoffset="100px" @visibilitychange="visibilityChange"
               @click="hidePopup">
            <text class="text">我是气泡弹窗</text>
        </popup>
        <button class="button" onclick="showPopup">显示气泡弹窗</button>
    </div>
</div>

/* popuppage.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;
    font-size: 30px;
}

// popuppage.js
import prompt from '@system.prompt'

export default {
    visibilityChange(e) {
        prompt.showToast({
            message: '气泡弹窗的可见性为: ' + e.visibility,
            duration: 3000,
        });
    },
    showPopup() {
        this.$element("popup").show();
    },
    hidePopup() {
        this.$element("popup").hide();
    }
}// popuppage.js
import prompt from '@system.prompt'

export default {
    visibilityChange(e) {
        prompt.showToast({
            message: '气泡弹窗的可见性为: ' + e.visibility,
            duration: 3000,
        });
    },
    showPopup() {
        this.$element("popup").show();
    },
    hidePopup() {
        this.$element("popup").hide();
    }
}

4 refresh：下拉刷新容器。

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

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

仅支持如下事件：

<!-- refreshpage.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>

/* refreshpage.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;
}

import prompt from '@system.prompt';
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) {
        prompt.showToast({
            message: '刷新中...'
        })
        var that = this;
        that.fresh = e.refreshing;
        setTimeout(function () {
            that.fresh = false;
            var addItem = '更新元素';
            that.list.unshift(addItem);
            prompt.showToast({
                message: '刷新完成!'
            })
        }, 2000)
    }
}

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

示例：

<!-- stackpage.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>

/* stackpage.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;
}

6 swiper：滑动容器，提供切换子组件显示的能力。支持除<list>之外的子组件。

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

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

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

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

FocusParam对象说明

示例：

<!-- swiperpage.hml -->
<div class="container">
    <swiper class="swiper" id="swiper" index="0" indicator="true"
            loop="true" digital="false" cachedsize="-1"
            scrolleffect="spring">
        <div class = "swiperContent1" >
            <text class = "text">First screen</text>
        </div>
        <div class = "swiperContent2">
            <text class = "text">Second screen</text>
        </div>
        <div class = "swiperContent3">
            <text class = "text">Third screen</text>
        </div>
    </swiper>
    <input class="button" type="button" value="swipeTo" @click="swipeTo"></input>
    <input class="button" type="button" value="showNext" @click="showNext"></input>
    <input class="button" type="button" value="showPrevious" @click="showPrevious"></input>
</div>

/* swiperpage.css */
.container {
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
}
.swiper {
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 70%;
    height: 130px;
    border: 1px solid #000000;
    indicator-color: #cf2411;
    indicator-size: 14px;
    indicator-bottom: 20px;
    indicator-right: 30px;
    margin-top: 100px;
    next-margin:20px;
    previous-margin:20px;
}
.swiperContent1{
    height: 100%;
    justify-content: center;
    background-color: #007dff;
}
.swiperContent2{
    height: 100%;
    justify-content: center;
    background-color: #ff7500;
}
.swiperContent3{
    height: 100%;
    justify-content: center;
    background-color: #41ba41;
}
.button {
    width: 70%;
    margin: 10px;
}
.text {
    font-size: 40px;
}

// swiperpage.js
export default {
    swipeTo() {
        this.$element('swiper').swipeTo({index: 2});
    },
    showNext() {
        this.$element('swiper').showNext();
    },
    showPrevious() {
        this.$element('swiper').showPrevious();
    }
}