HarmonyOS应用开发-下拉刷新实现

一.创建项目

二.示例代码
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>

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;
}

js：

import prompt from '@system.prompt';
export default {
    data: {
        list:[],
        fresh:false
    },
    onInit() {
        this.list = [];
        for (var i = 0; i <= 2; 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)
    }
}

三、效果展示