首页 > 其他分享 >鸿蒙 使用 Refresh 实现下拉刷新

鸿蒙 使用 Refresh 实现下拉刷新

时间:2024-07-23 13:29:28浏览次数:11  
标签:20 Center 鸿蒙 promptAction 100% list Refresh 刷新 refreshing

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct Index {

  @State
  refreshing: boolean = false

  @State
  list: number[] = Array(20).fill(Date.now())

  @Builder
  content(){
    Stack(){
      Row(){
        LoadingProgress()
          .height(32)
        Text('正在刷新...')
          .fontSize(16)
          .margin({left:20})
      }
      .alignItems(VerticalAlign.Center)
    }
    .align(Alignment.Center)
  }

  build() {
    Column(){
      Refresh({ refreshing: $$this.refreshing, builder: this.content() }){
        List(){
          ForEach(this.list, (item: string)=>{
            ListItem(){
              Row(){
                Text(item.toString())
              }
              .justifyContent(FlexAlign.Center)
              .width('100%')
              .padding(20)
            }
          })
        }
        .divider({
          strokeWidth: 1,
          color: Color.Yellow,
          startMargin: 10,
          endMargin: 10
        })
      }
      .onRefreshing(()=>{
        setTimeout(()=>{
          this.list = Array(20).fill(Date.now())
          this.refreshing = false
          promptAction.showToast({message:'刷新成功'})
        },1000)
      })
    }
    .height('100%')
    .width('100%')

  }
}

 

标签:20,Center,鸿蒙,promptAction,100%,list,Refresh,刷新,refreshing
From: https://blog.csdn.net/qq_52602294/article/details/140633440

相关文章

  • GMSSL2.x编译鸿蒙静态库和动态库及使用
    一、编译环境准备1.1开发工具DevEco-Studio下载。1.2SDK下载​ 下载编译第三方库的SDK有两种方式,第一种方式从官方渠道根据电脑系统选择对应的SDK版本,第二种方式通过DevEco-Studio下载SDK。本文只介绍通过DevEco-Studio下载SDK的方式。安装SDK到本地根据SDK安装位......
  • 鸿蒙UI系统组件06——进度条(Progress)
    如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下面名片,关注公众号。1、概述Progress是进度条显示组件,显示内容通常为某次目标操作的当前进度。2、创建进度条Progress通过调用接口来创建,接口调用形式如下:Progress(options:{value:number,total?:number,type?......
  • 解决Element UI 表格组件懒加载数据刷新问题
    一、问题描述elementui的table组件设置成懒加载时,遇到数据表格需要更新、删除等操作,子节点不会自动更新。二、解决思路刷新数据,就是重新调用load(),通过map记录已展开的节点,需要刷新数据时,取出对应treeNode,调用load()进行数据刷新。三、代码实现(VUE)exportdefault{data(......
  • 鸿蒙开发 03 封装 @ohos/axios (最新深度封装)
    鸿蒙开发03封装@ohos/axios(最新深度封装)1、安装@ohos/axios2、开始封装2.1新建utils文件夹和api文件夹2.2在utils文件夹里新建http.ts2.3在api文件夹里新建api.ets3、页面调用4、打印结果1、安装@ohos/axiosohpminstall@ohos/axiosTips:按......
  • winform 的 datagridview 动态刷新
    要实现在datagridview中动态的增删改查,目前能用的比较友好的方案似乎只有datatable,网上有人说用BindingList的,我替你们试过了,无法筛选,坑很多publicpartialclassForm1:Form{privateDataTabledataTable=newDataTable();privateBindingSour......
  • 解决IDEA自带的Maven 3.9.x无法刷新HTTP Nexus私服的问题
    解决IDEA自带的Maven3.9.x无法刷新HTTPNexus私服的问题前言在日常开发中,我们经常会使用Maven来管理项目的依赖。而Nexus私服则是一个常用的Maven仓库管理工具,可以帮助我们更好地管理和分发项目的依赖。然而,有时候我们会遇到一些棘手的问题,比如在使用IDEA自带的Maven3.9.x时,无......
  • uniapp中uni.navigateBack返回后刷新页面数据的实现
    一、前言在移动端中,数据列表中某项数据点击编辑,进入下一个页面编辑数据,保存后回退到数据列表页,此时需要刷新列表数据,否则显示的列表数据还是旧的。这种场景感觉很多地方都有出现,是需要详细说说方法,也就是uniapp中uni.navigateBack返回后刷新页面数据。1.1、uni.navigateBack ......
  • 鸿蒙系统简洁
    1:手机开放联盟:开放手机联盟,是谷歌牵头,拉拢手机设备商,芯片商,运营商,通信设备商等一大波公司搞的,目的是为了一起联合起来在移动设备领域一起挣钱,最开始是为了对抗如日中天的苹果,谷歌公司(Google)于2007年宣布34家终端和运营企业加入开放手机联盟(OpenHandsetAlliance),将共同开发名......
  • Vue.js:如何区分页面关闭和刷新?深入解析与实战
    Vue.js:如何区分页面关闭和刷新?深入解析与实战在开发基于Vue.js的单页应用(SPA)时,我们经常需要处理用户关闭浏览器标签页或刷新页面的情况。虽然这两种操作看似相似,但在某些业务场景中,我们需要对它们进行区分并做出不同的响应。那么,如何在Vue.js中实现这一点呢?本文将带你深入探讨这......
  • 聊聊springboot项目脱离配置中心,如何实现属性动态刷新
    前言如果大家有开发过微服务项目,那对配置中心应该是耳熟能详了,配置中心有个很有用的能力,就是热更新属性,即不重启服务,就能做到属性的动态变更。而我们今天讲的话题是,怎么样不使用配置中心,也能达到如上的效果如何实现属性的热更新如果我们属性是配置在配置文件中,我们可以通过监听......