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

来源: 鸿蒙时代 作者:鸿蒙时代 2022-04-22 11:35:05

  
一.创建项目

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

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

  hml:

 
  
{{$item}}
0
收藏
0