在做项目的时候一般会遇到下拉刷新的功能,我不知道大家平时是怎么实现的。因为我们现阶段使用的是,<强>离子强,所以我就学习了一下利于框架去实现下拉刷新的功能。下面给家说一下怎么用离子实现页面的下拉刷新吧。
具体的实现请看下面的源码:
HTML代码
<李> <强> ion-refresher ,:即为下拉刷新的图标;
<李> <强> pulling-text=强”下拉刷新“这里的问题可以随意更换,喜欢就好;
<李> <强>得以=癲oRefresh()“这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据。
& lt; body ng-app=捌舳鳌?ng-controller=癮ctionsheetCtl”,在
,,,& lt; ion-pane>
,,,,,,,& lt; ion-content 比;
,,,,,,,,,,,& lt; ion-refresher pulling-text=毕吕⑿隆?得以=癲oRefresh()“祝辞& lt;/ion-refresher>
,,,,,,,,,,,& lt; ion-list>
,,,,,,,,,,,,,,,& lt; ion-item ng-repeat=癷tem 拷贝;项目”,ng-bind=癷tem.name祝辞& lt;/ion-item>
,,,,,,,,,,,& lt;/ion-list>
,,,,,,,& lt;/ion-content>
,,,& lt;/ion-pane> & lt;/body> JavaScript代码
<李> <>强劲美元范围。项目[]这个是页面刚进来的数据
<李> <强> doRefresh ,()显然这个是当你要刷新的时候所执行的方法
<李> <强> item.json ,这个就是当你点击刷新后我们就要从新获取数据这个json就是最近的数据,项目中就是你要从新从服务器拿一次数据并且更新到客户端。
angular.module(“启动器”,,[“离子”]).run(函数(ionicPlatform美元),{
美元才能ionicPlatform.ready(函数(),{
,,,//,Hide 从而accessory bar by default (remove 却;能够用show 从而accessory bar above 从而键盘
,,,//,for form 输入)
,,,如果(window.cordova ,,, window.cordova.plugins.Keyboard), {
,,,,,cordova.plugins.Keyboard.hideKeyboardAccessoryBar(真正的);
,,,}
,,,如果(window.StatusBar), {
,,,,,StatusBar.styleDefault ();
,,,}
});})才能范式(“actionsheetCtl”,“美元范围”,“美元超时”,,“http美元”,函数(范围、超时、美元$ http) {
,,,$ scope.items=(
,,,,,,,{
,,,,,,,,,,,“名字”:“HTML5”
,,,,,,,},
,,,,,,,{
,,,,,,,,,,,“名字”:“JavaScript”
,,,,,,,},
,,,,,,,{
,,,,,,,,,,,“名字”:“Css3”
,,,,,,,}
,,,);
,,,scope.doRefresh 美元;=,()函数,{
,,,,,,,//注意改为自己本站的地址,不然会有跨域问题
,,,,,,,http.get美元(“http://www.aliyue.net/demo_source/item.json”),
,,,,,,,,,,,.success(函数(newItems), {
,,,,,,,,,,,,,,,scope.items 美元;=,newItems;
,,,,,,,,,,,})
,,,,,,,,,,,最后(函数(),{
,,,,,,,,,,,,,,,范围。广播美元(“scroll.refreshComplete”);
,,,,,,,,,,,});
,,,};}]) 项目。json文件数据:
(
,,,{
,,,,,,,“名字”:“菜鸟教程”
,,,},
,,,{
,,,,,,,“名字”:“www.aliyue.net”,},] 今天就介绍到这里,小伙伴自己动手试试吧,改天给大家分享离子怎么实现上滑加载更多。祝大家学习愉快。有什么疑问可以加群找我讨论。欢迎大家哦!
=============================
小月博客:
小月博客网络技术交流308649768
=============================
