Ionic -- Refresher InfiniteScroll 下拉刷新与滚动懒加载
下拉刷新和滚动加载在移动端是很常见的需求,Ionic 为我们提供了开箱即用的组件。在这里我结合自己做的小demo简单介绍下。
Template
在模板中需要将 ion-refresher
组件放置在 ion-content
内部的首位,将 ion-infinite-scroll
置于尾部。
<ion-refresher (ionRefresh)="doRefresh($event)"><ion-refresher-contentpullingIcon="arrow-dropdown"pullingText="下拉刷新"refreshingSpinner="circles"refreshingText="刷新中...">></ion-refresher-content>
</ion-refresher><!-- 这里放置需要显示的数据 --><ion-infinite-scroll (ionInfinite)="doInfinite($event)"><ion-infinite-scroll-contentloadingSpinner="bubbles"loadingText="加载更多..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
Refresher 下拉刷新
下拉刷新事件在用户下拉一定程度时被触发,进而启动刷新过程。一旦异步操作完成并且刷新结束,需要调用complete()。
doRefresh(refresher){setTimeout(() => {this.getData() //获取数据refresher.complete()}, 1000)
}
InfiniteScroll 滚动懒加载
无限滚动事件是当用户向上滚动页面时执行的操作,当用户滚动到指定的距离触发事件。异步操作完成需要调用complete()。
虽然名字叫无限滚动,但在实际需求中我们经常用它来完成数据的懒加载功能。
doInfinite(infiniteScroll){setTimeout(() => {this.getData()infiniteScroll.complete()}, 1000)
}
示例
1. 效果展示
基于一个简单的增删改查小 demo 效果如图。
2. Template
3. Model
在PC端一般将数据分页处理以达到提升性能的目的,而移动端的操作特性不允许使用分页组件(既丑又不方便 : )
但它们原理是相同的,因此不必改变接口相关方法只改变前端实现即可。当前的 PageInfo
是需要展示数据类的分页包装类。
4. Service
调用接口方法注册为服务,使用时依赖注入即可。
5. Typescript
调用分页接口服务传参获取数据,每加载一次就将部分数据 push
到结果集中,view
随之更新。
由于使用场景较多,这里也可以将 doRefresh()/doInfinite()
注册为服务。
若有错误或表达不准确处欢迎指正。
转载于:https://www.cnblogs.com/qimeng/p/8793643.html
Ionic -- Refresher InfiniteScroll 下拉刷新与滚动懒加载相关推荐
- jquery手机端页面下拉刷新,上划加载更多
手机页面下拉刷新,上划加载更多,IOS不能下拉的问题解决 -转圈的是需要引用样式,代码删除了 上划加载时的样子 <script type="text/javascript"& ...
- AngularJS封装指令实现下拉刷新自动翻页加载数据
目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下. 滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight. 一.不适用Jqu ...
- 微信小程序 下拉刷新页面时的加载状态
案发现场:在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方. 其实三个点是可以看到的.只不过默认是白色的 案例效果 1.在 app.json中 添加样式 "backgroundTe ...
- 微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录 一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载 三.分包加载 什么是分包 为什么要使用分包 如 ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
话不多说,直接上代码,原文地址 博客地址 <template><div class="list-warp-template"@touchstart="h ...
- 【Android开源控件】SmartRefreshLayout实现下拉刷新,上划加载
- (仿头条APP项目)6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录 一.点击过的新闻列表文字变灰 效果图 实现思路 导入ormlite数据库类依赖 利用ormlite创建数据库和表 创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
- 微信小程序如何实现上拉刷新(即分页加载数据)?
步骤1. enablePullDownRefresh这个属性设置为true.enablePullDownRefresh可以写在app.json 中和页面的xx.json,两者的区别是, app.j ...
- 微信小程序自定义下拉选择框与分页加载--自用【随笔】
效果图展示 下拉加载 上拉加载 编码实现 wxml <!--pages/unitmanage/unitlease/unitlease.wxml--> <view><vie ...
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
最新文章
- 【修真院“善良”系列之十】初级Java程序员的学习路线
- 织梦dedecsm系统企业简介类单栏目模版如何修改和调用
- 多线程读取文件File
- CreateThread和_beginthread的区别
- pythonchallenge--0
- MVC4发布到IIS7报404错误
- 计算机系英文简历技能skill,如何填英文简历中SKILL选项
- 移动增值短信平台实施计划方案(报业集团短信手机报)
- 【esp8266】【Node.js】【Websocket】esp8266和Node.js通过websocket进行通信,实验记录及踩坑记录
- Python requests timeout 分析
- 2019JAVA面试题精粹附答案
- Fits文件在天文方面的应用(数据处理部分)
- 《天池龙珠 - Python训练营》03.Python基础进阶:从函数到高级魔法方法
- hive------内部函数与自定义函数
- 如何一次性删除PPT中所有动画效果?
- 案例1:金融数据分析----code知识点详解版
- ue4 迁移模型_UE4模型整体导入流程
- 基于阿里云oss的文件管理系统
- 如何关闭占用的端口程序
- 2021-07-18:最高的广告牌。你正在安装一个广告牌,并希望它高度最大。这块广告牌将有两个钢制支架,两边各一个。每个钢支架的高度必须相等。你有一堆可以焊接在一起的钢筋 rods。举个例子,如果钢筋
热门文章
- request body is missing
- 什么是万维网?什么是互联网?
- 【云原生 | 21】Docker运行Web服务实战之Apache
- 1296. 聪明的燕姿
- 39岁阿里P9提前退休,资产1.5亿,北京4套房!职场人的离职悲喜各不相同
- zabbix 使用教程
- 矩阵和向量的范式(Norms for Vectors and Matrices)
- 【Kotlin学习之旅】Kotlin实现101个C#的LINQ示例,让你领略一下Kotlin代码的魅力
- 微信端跳到外部浏览器进行apk文件下载
- Problem : 美丽黄山II