Ionic实现页面下拉刷新(ion-refresher）功能代码

在平常做项目时下拉刷新功能非常常见，那么大家都是怎么实现的呢？下面小编给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能，一起看看看吧！

具体的实现请看下面的源码：

HTML 代码

ion-refresher ： 即为下拉刷新的图标；
pulling-text=“下拉刷新” 这里的问题可以随意更换，喜欢就好；
on-refresh=”doRefresh()” 这个便是当下拉的时候我们要执行的方法，这里便是刷新页面的数据。

<body ng-app="starter" ng-controller="actionsheetCtl" >
<ion-pane>
<ion-content >
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>

JavaScript 代码

$scope.items[ ] 这个是页面刚进来的数据
doRefresh () 显然这个是当你要刷新的时候所执行的方法
item.json 这个就是当你点击刷新后我们就要从新获取数据 这个json就是最近的数据，项目中就是你要从新从服务器拿一次数据并且更新到客户端。

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){
$scope.items=[
{
"name":"HTML5"
},
{
"name":"JavaScript"
},
{
"name":"Css3"
}
];
$scope.doRefresh = function() {
//注意改为自己本站的地址，不然会有跨域问题
$http.get('http://www.aliyue.net/demo_source/item.json')
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])

item.json 文件数据：

[
{
"name":"菜鸟教程"
},
{
"name":"www.aliyue.net" }
]

关于Ionic实现页面下拉刷新(ion-refresher功能就给大家介绍这么多，后续还会给大家介绍ionic怎么实现上滑加载更多的功能，请大家继续关注我们给大家带来的精彩内容。

赞 (0)

相关推荐

  • ionic实现下拉刷新载入数据功能

    本文实例为大家分享了ionic下拉刷新载入数据的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • Ionic如何实现下拉刷新与上拉加载功能

    IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程

  • Ionic实现页面下拉刷新(ion-refresher）功能代码

    Ionic实现页面下拉刷新(ion-refresher）功能代码

    在平常做项目时下拉刷新功能非常常见,那么大家都是怎么实现的呢?下面小编给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能,一起看看看吧! 具体的实现请看下面的源码: HTML 代码 ion-refresher : 即为下拉刷新的图标: pulling-text="下拉刷新" 这里的问题可以随意更换,喜欢就好: on-refresh="doRefresh()" 这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据. <body

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • MUI实现上拉加载和下拉刷新效果

    本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码,供大家参考,具体内容如下 编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar(max), --字段字符串 @strWhere varchar(max), --where条件 @PageIndex int, --页码 @PageSize int, --每页容纳的记录数 @Sort VARC

  • Javascript下拉刷新的简单实现

    本文实例为大家分享了Javascript下拉刷新的简单实现代码,供大家参考,具体内容如下 Html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimu

  • Android实现RecyclerView下拉刷新效果

    本文为大家分享了Android实现RecyclerView下拉刷新效果的具体代码,供大家参考,具体内容如下 思路 RealPullRefreshView继承了一个LinearLayout 里面放置了一个刷新头布局,将其margin_top设置为负的刷新头的高度的 再添加一个RecyclerView 触摸事件分发机制,当在特定条件下让RealPullRefreshView拦截触摸事件,否则的话,不拦截,让RecyclerView自己去处理触摸事件 在手指下拉时,定义好不同的状态STATE,在不同状

  • 微信小程序（六）：列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序下拉刷新PullDownRefresh的使用方法

    微信小程序下拉刷新PullDownRefresh的使用方法

    前言 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh .虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的. 微信小程序--下拉刷新.jpg 最近开发一款微信小程序,里面有用到下拉刷新数据的功能.于是,又开始折腾了... 一.onPullDownRefresh回调 初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之... // http://itlao5.com onPullDownRe

  • Android自定义实现顶部粘性下拉刷新效果

    Android自定义实现顶部粘性下拉刷新效果

    本文实例为大家分享了Android实现顶部粘性下拉刷新效果的具体代码,供大家参考,具体内容如下 学习:视频地址 activity_view_mv代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://sche

随机推荐