Ionic4.x ion-refresher 下拉更新

官方文档:https://ionicframework.com/docs/api/refresher

<ion-header><ion-toolbar><ion-title>Tab One</ion-title></ion-toolbar>
</ion-header><ion-content><ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)"><ion-refresher-contentpullingIcon="arrow-dropdown"pullingText="加载中..."refreshingSpinner="circles"refreshingText="Refreshing..."></ion-refresher-content></ion-refresher><ion-list><ion-item *ngFor="let item of list"><ion-label>{{item}}</ion-label></ion-item></ion-list>
</ion-content>

import { Component } from '@angular/core';@Component({selector: 'app-tab1',templateUrl: 'tab1.page.html',styleUrls: ['tab1.page.scss']
})
export class Tab1Page {public list:any[]=[];constructor(){for(var i=0;i<10;i++){this.list.push(`我是第${i}条数据`);}}doRefresh(event){setTimeout(()=>{for(var i=10;i<15;i++){this.list.unshift(`我是第${i}条数据`);        }event.target.complete();    //告诉ion-refresher  更新数据
},2000)}
}

转载于:https://www.cnblogs.com/loaderman/p/10973512.html

Ionic4.x ion-refresher 下拉更新相关推荐

微信小程序教学第三章第四节（含视频）：小程序中级实战教程：下拉更新、分享、阅读标识...
为什么80%的码农都做不了架构师?>>> 下拉更新.分享.阅读标识本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前 ...
android ScrollView实现上拉、下拉更新
项目中需要实现对listView的上拉加载更多的功能,忙了一上午也没搞定,从网上看到一篇文章实现了listView的下拉功能,在参照着改的过程中,实现了另一种形式的上拉.下拉更新,参照文章http:/ ...
[EGORefreshTableHeaderView]手动启动下拉更新的方法
原文地址:http://blog.csdn.net/ugg/article/details/7283661 Q:在EGORefreshTable中手动启动下拉更新的方法? A:EGORefreshTa ...
仿新浪微博的ListView下拉更新功能
由于最近做的项目中也用到了这个功能,今天刚好实现了下,就趁现在有时间写篇博客分享下.在做的时候也参考了下别人的代码,毕竟站在巨人的肩膀上才会是自己更加强大.哈哈!先看看新浪的下拉更新是什么样的吧! O ...
Android模仿QQ的左右滑动切换界面和下拉更新的效果
转自http://www.linuxidc.com/Linux/2012-08/67207.htm 主布局main.xml <?xml version="1.0" encod ...
模仿QQ的左右滑动切换界面和下拉更新的效果
1.首先看看布局主布局main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
完全代码实现UITableView下拉更新，异步请求数据
原文:http://www.cnblogs.com/xiaobaizhu/archive/2012/12/01/2797817.html 之前写了一篇用控件实现自定义UITableViewCell的, ...
[小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
html的下拉刷新页面,html下拉刷新上拉加载Refresher3.0
插件描述:依赖于iscroll,模拟app的Listview的下拉更新上拉加载效果,查看效果最好用chrome调出模拟器查看. 1.首先引用必须的文件 2.加入需要的html,结构如下 row 10 ...
Android学习之——ListView下拉刷新
背景知识 ListView使用非常广泛,对于使用ListView的应用来说,下拉刷新是必不可少要实现的功能. 我们常用的微博.网易新闻,搜狐新闻都使用了这一功能,如下图所示. 微博搜狐新闻 ...

Ionic4.x ion-refresher 下拉更新

Ionic4.x ion-refresher 下拉更新相关推荐

最新文章

热门文章