0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-04-22 10:23 次阅读
poYBAGJiEQWATT5gAAB0NMqxUpI767.png


一.创建项目

poYBAGJiERuAdn1SAAAWl3Uu-rY311.png

二.示例代码
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}}
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    79

    文章

    1977

    浏览量

    30258
收藏 人收藏

    评论

    相关推荐

    Taro下拉加载更多,上拉刷新是什么

    Taro下拉加载更多,上拉刷新
    发表于 06-15 17:10

    绝对干货!HarmonyOS开发者日资料全公开,鸿蒙开发者都在看

    、服务中心等),卡片演示及FA卡片模板,分享卡片功能实现实例。3、绝对想不到的卡片玩法:该主题分享如何同时控制多个HarmonyOS卡片,如何在卡片应用中引入HarmonyOS分布式技术。4
    发表于 08-04 14:36

    HarmonyOS卡片开发--服务卡片概述

    片服务。 卡片提供方实例管理模块:由卡片提供方开发实现,负责对卡片管理服务分配的卡片实例进行持久化管理。 通信适配层:由HarmonyOS
    发表于 09-22 14:10

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

    ;#039;刷新中...'})var that = this;that.fresh = e.refreshing;setTimeout(function () {that.fresh
    发表于 04-22 10:45

    android 水滴动画版下拉刷新

    android 水滴动画版下拉刷新
    发表于 12-17 17:22 0次下载

    鸿蒙系统如何设置自定义下拉刷新控件

    Ohos-MaterialRefreshLayout 是一个自定义 Material 风格下拉刷新控件,支持设置水波纹效果,支持下拉刷新侵入式和非侵入式,初始化自动
    的头像 发表于 09-13 09:24 3364次阅读

    华为开发HarmonyOS零基础入门:四步实现HarmonyOS应用

    华为开发HarmonyOS零基础入门:四步实现HarmonyOS应用,可以自定义主键实际应用在开发者界面。
    的头像 发表于 10-23 10:05 1953次阅读
    华为<b class='flag-5'>开发</b>者<b class='flag-5'>HarmonyOS</b>零基础入门:四步<b class='flag-5'>实现</b><b class='flag-5'>HarmonyOS</b>应用

    华为开发HarmonyOS零基础入门:导航Component通知地点实现

    华为开发HarmonyOS零基础入门:导航Component通知地点实现,provide与consume进行绑定,属性对应组件流程刷新
    的头像 发表于 10-23 11:25 1318次阅读
    华为<b class='flag-5'>开发</b>者<b class='flag-5'>HarmonyOS</b>零基础入门:导航Component通知地点<b class='flag-5'>实现</b>

    自定义下拉刷新控件

    这是一个自定义下拉刷新控件,包含有趣的动画。 概述 支持下拉刷新动画效果 支持下拉刷新回调状态返
    发表于 03-22 09:30 2次下载

    鸿蒙OS初始化组件之Android智能下拉刷新框架

    SmartRefreshLayout以打造一个强大,稳定,成熟的下拉刷新框架为目标,并集成各种的炫酷、多样、实用、美观的Header和Footer。 正如名字所说
    发表于 03-22 10:55 1次下载

    支持上拉加载和下拉刷新的鸿蒙版基础控件教程

    介绍 这是一个支持上拉加载和下拉刷新的鸿蒙版基础控件,用于页面数据刷新和加载 软件架构 软件架构说明 使用鸿蒙基础控件实现 项目背景 由于大都数项目需要用到
    发表于 03-29 13:35 0次下载

    带小飞机动画的下拉刷新控件使用教程

    简介 带小飞机动画的下拉刷新控件 集成 1.下载libs模块包关联使用 依赖项 { implementation fileTree(dir: ‘libs’, include: [‘*.jar
    发表于 03-30 10:00 5次下载

    基于开源项目通用下拉刷新组件进行鸿蒙化的移植和开发

    项目介绍 项目名称:通用下拉刷新组件 所属系列:鸿蒙的第三方组件适配移植 功能:下拉后进行页面刷新 项目移植状态:主功能完成 调用差异:无 开发
    发表于 03-30 10:53 0次下载

    面向HarmonyOS开发者的HarmonyOS 3.0 Beta介绍

    2021年10月,我们面向开发者发布了HarmonyOS 3.0 Developer Preview版,但开发的脚步永不停歇,现在我们又更新了API版本,配套发布了HarmonyOS
    的头像 发表于 07-06 20:34 3312次阅读

    HarmonyOS开发案例:【自定义下拉刷新动画】

    主要介绍组件动画animation属性设置。当组件的某些通用属性变化时,可以通过属性动画实现渐变效果,提升用户体验。
    的头像 发表于 04-29 16:06 975次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【自定义<b class='flag-5'>下拉</b><b class='flag-5'>刷新</b>动画】