ionic-上拉刷新载入数据
来源:互联网 发布:数据统计与分析 编辑:程序博客网 时间:2024/05/30 02:26
<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css"> <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script> <title>Title</title> <!-- 由于移动端的特殊性 下拉刷新ion-refresher:移动端没有刷新的按钮~图标~可以操作的东西【浏览器的工具栏中有刷新的按钮】 下拉加载ion-infinite-scroll :移动端页面,显示的内容有限,优先加载显示用户能看到的内容部分,在用户拖动网页的过程中,【动态加载下面的内容;模拟了PC端的延迟加载】 问题: 问题0:实现下拉加载时,页头出现留白,什么原因?怎么解决? 原因:将下拉加载组件写在了内容的上边,导致预留的显示加载图标的位置留白了 解决:将下拉加载组件写在内容的下边 问题1:如果不添加$scope.$broadcast()广播,数据下拉加载,只加载一次。然后就木有然后了... 没有广播,信息数据不对称,第一次会默认加载 问题2:如果添加$scope.$broadcast()广播,数据下拉加载,会无限加载【出现错误】 错误并不是上拉加载控件的错误 模拟出现的错误:而是数据的错误。: ng-repeat,不能处理重复的数据,如果出现数据重复,就会出现处理错误 解决方案:通常情况下,页面中出现的展示的数据,谁也保证不了会又重复的数据 但是后端对于重复的数据进行了对象的封装处理,给每一条数据都进行了编号 {1, "hello"} {2, "hello"} 问题3:ng-if指令,指定调用了函数moreDataCanbeLoaded(),数据的上拉加载失效 解决思路: 1.查看官方API文档,对文档中关于上拉加载的处理过程进行查看,尤其是文档中标注【注意】的地方 2.文档中,如果没有需要注意的地方,文档的代码中也没有相关的解决方案,仅仅是使用方式的描述 百度/谷歌搜索相关的代码,参考其他开发人员的解决方式,结合自己的需求进行处理 --></head><body ng-controller="myCtrl"><!--页面头部--><ion-header-bar class="bar-royal"> <h1 class="title">我是标题</h1></ion-header-bar><!--内容--><ion-content> <!-- 1.添加下拉刷新的组件 --> <ion-refresher pulling-text="正在刷新页面数据..." on-refresh="doRefresh()"> </ion-refresher> <!--ng-repent 渲染内容--> <ul class="list"> <!-- track by $index 用于循环展示重复的数据 通过¥index 数据下标 经常在测试是使用 --> <li ng-repeat="g in goodses track by $index"> <span ng-bind="g"></span> </li> </ul> <!-- 1.添加上拉刷新的组件 --> <ion-infinite-scroll on-infinite="loadMore()" distance="3%"> </ion-infinite-scroll></ion-content><!--页面底部--><ion-footer-bar class="bar-royal"> <h1 class="title">我是底部</h1></ion-footer-bar><script> var app=angular.module("myApp",["ionic"]); app.controller("myCtrl",["$scope",function ($scope) { $scope.goodses=[]; for(var i=0;i<50;i++){ $scope.goodses.push(i+"我是首页展示") } //下拉刷新 $scope.doRefresh=function () { $scope.goodses=[]; //下拉载入数据 for(var i=0;i<50;i++){ $scope.goodses.push(i+"我是下拉载入****") } $scope.$broadcast("scroll.refreshComplete"); } //上拉刷新 $scope.loadMore=function () { //上拉载入数据 for(var i=0;i<50;i++){ $scope.goodses.push(i+"我是上拉载入++++") } $scope.$broadcast("scroll.infiniteScrollComplete"); } }]) /* 页面下拉刷新,其实就是延迟更改数据 数据一旦被延迟更新,在Angular中我们通过$scope.$apply()进行脏数据检查,然后将数据同步 ionic中,要通过广播信号的方式,使用$scope.$broadcase("scroll.refreshComplete")告诉页面中的所有组件, 数据已经刷新完成,可以重新加载数据 */</script></html>
0 0
- ionic-上拉刷新载入数据
- ionic-下拉刷新载入数据
- Ionic上拉刷新下拉加载更多
- Ionic 上拉刷新,下拉加载
- ionic---上拉加载下拉刷新
- ionic 上拉加载和下拉刷新
- ionic上拉刷新功能的demo
- ionic+上拉刷新,下拉加载
- Android ListView下拉刷新、上拉载入更多
- Android ListView下拉刷新、上拉载入更多[转]
- Android中ListView下拉刷新、上拉载入更多示例
- ListView下拉刷新、上拉载入更多之封装改进
- Android ListView下拉刷新、上拉载入更多
- ListView下拉刷新、上拉载入更多之封装改进
- 上拉下拉刷新数据
- ionic 实现下拉刷新上拉加载更多
- ionic 下拉刷新和上拉加载更多
- ionic ——— 下拉刷新及上拉加载
- c++实验六
- xxx项目接口文档模板
- JMeter性能测试
- Data Types
- Python+ADB实现Android手机QQ自动点赞
- ionic-上拉刷新载入数据
- POJ 1200-Crazy Search
- XT邀请赛比赛前的感想
- 一篇关于apache commons类库的详解
- POJ NOI0105-41 数字统计
- 欢迎使用CSDN-markdown编辑器
- 知网cncnki查重系统的重复率检测
- AngularJS 路由
- 排序算法之希尔排序