ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的，标红的地方为关键代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
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.runoob.com/try/demo_source/item.json') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])
</script>
</head>
<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>
</html>
默认打开页面是这样的
/****************页面载入方法************************/
$http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems.content;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
<ion-list>
<div class="content ionic-pseudo card" ng-repeat="item in items" >
上拉加载更多可以模仿下拉刷新写
首先在</ion-list>下及</ion-content>上（不一定非得是</ion-list>，这里是放在列表最下方的意思）上放置代码
。。。。。
</ion-list>
<ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll>
</ion-content>
</body>
</html>
immediate-check="false"是实验了很多次后来加上的，具体见：http://feifei.im/archives/276
然后是js代码部分
$scope.currentPage=1;//定义下拉加载分页的初始值
$scope.loadMore=function(){
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city;
$scope.currentPage += 1;//每当滚动到底部，页码累计加1
$http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
for (var i=0;i<newItems.content.length;i++){//newItems.content.length，当前json的数量
$scope.items.push(newItems.content[i]);//一个一个取出来，推送到原来的items里
}
if (newItems.content.length < 10) {//当json的数量小于10（已经确定了一页为10条数据），说明页面到底了
$scope.noMorePage=true;//禁止滚动触发时间
}
$scope.$broadcast('scroll.infiniteScrollComplete');
})
};
$scope.currentPage这个值会一直跑，一直累计加1，当你刷新页面后，这就会是个bug，所以，在下拉刷新代码里添加了
$scope.currentPage=1;
$scope.noMorePage=false;
还原代码
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>app</title>
<link href="css/ionic.min.css" rel="stylesheet">
<script src="js/ionic.bundle.min.js"></script>
<script src="js/config.js"></script> <script type="text/javascript"> var app = angular.module( 'starter', ['ionic'] ).config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|sms):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}]) .controller( 'actionsheetCtl',['$scope','$location','$timeout' ,'$http',function($scope,$location,$timeout,$http){ //$scope.PageIndex = 1;
$scope.currentPage=1;
//$scope.noMorePage=false; $scope.domain = url;
var name = $location.search().name; /****************页面载入方法************************/
$http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems.content;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
}); /****************刷新方法************************/
$scope.doRefresh = function() {
//alert($scope.currentPage);
$scope.currentPage=1;
$scope.noMorePage=false; //console.log($scope.PageIndex);
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city;
$http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems.content;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete'); });
}; /*
function a(){
var i = 2;
function b(){
//alert(i++);
var page = i++;
return page;
}
return b;
}
var c = a();
*/ /****************加载方法************************/ $scope.loadMore=function(){
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city;
//var p = c(); //$scope.PageIndex++;
$scope.currentPage += 1;
//console.log($scope.currentPage); $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
//$scope.items.push(newItems.content);
//console.log($scope.items);
//var objs =[{a:1},{a:2}];
//angular.forEach(newItems.content, function(data,index,array){
//data等价于array[index]
console.log(newItems.content.length); for (var i=0;i<newItems.content.length;i++)
{
$scope.items.push(newItems.content[i]);
} if (newItems.content.length < 10) {
$scope.noMorePage=true;
} //}); $scope.$broadcast('scroll.infiniteScrollComplete'); }) //$scope.havaMore=false;
}; }]) </script> <style>
body,input,h2{
font-family:Microsoft YaHei;
}
.icon{
color: #808080;
list-style-type: none; font-size: 2em;
}
.price{
border-radius: 5px;
background: red;
color: white;
font-size: 0.9em;
padding-top:0.2em;
}
a{
text-decoration:none;
color:black;
}
</style> </head> <body ng-app="starter" > <ion-content ng-controller="actionsheetCtl" >
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <div class="row"> <div class="col col-25">
<div class="col-demo"> <div class="item item-input ">
<input type="text" placeholder="地址" ng-model="start">
</div> </div>
</div> <!-- <div class="col col-10">
<center><li class="ion-arrow-swap icon" style="margin-top: 40%;" ></li></center>
</div>--> <div class="col col-25">
<div class="col-demo"> <div class="item item-input ">
<input type="text" placeholder="产品" ng-model="goods" >
</div> </div>
</div> <div class="col col-30"> <label class="item item-input item-select"> <div class="input-label">
种类
</div> <select ng-model="now_city">
<option value ="">全部</option>
<option value ="蔬菜">蔬菜</option>
<option value ="果品">果品</option>
<option value="粮油">粮油</option>
<option value="水产品">水产品</option>
<option value="畜产品">畜产品</option>
</select> </label> </div> <button class="ion-search icon button button-icon" ng-click="doRefresh()"></button> </div> <ion-list> <div class="content ionic-pseudo card" ng-repeat="item in items" > <div class="list list-inset"> <div class="item item-thumbnail-left">
<img src="{{domain}}/upload/{{item.pic}}.png"> <div class="row">
<div class="col"> <h2>{{item.goods}}</h2></div>
<div class="col"> <div class="price"><center>￥{{item.price}}</center></div> </div>
</div> <h2 >发布日期：{{item.date}}</h2>
<h2 >供货地址：{{item.start}}</h2> </div> <div class="item">
<div class="row">
<div class="col"> <center style="color:#F0AB4B">发布人：{{item.name}}</center></div>
<div class="col"> <center style="color:#97D152">种类：{{item.now_city}}</center></div>
</div>
</div> <div class="item">
<div class="row" >
<div class="col" style="border-right:1px solid #F0EFF1"> <center>
<h2 style="color:#0779FF;
font-weight:bold;"><a href="tel:{{item.phone1}}">给TA打电话</a></h2>
</center> </div>
<div class="col">
<center>
<h2 style="color:#0779FF;
font-weight:bold;"><a ng-href="sms:{{item.phone1}}">给TA发短信</a></h2>
</center> </div>
</div>
</div> </div> </div> </ion-list> <ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll> </ion-content> </body>
</html>
改版2（修复查询bug）
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>app</title>
<link href="css/ionic.min.css" rel="stylesheet">
<script src="js/ionic.bundle.min.js"></script>
<script src="js/config.js"></script> <script type="text/javascript"> var app = angular.module( 'starter', ['ionic'] ).config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|sms):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}]) .controller( 'actionsheetCtl',['$scope','$location','$timeout' ,'$http',function($scope,$location,$timeout,$http){ //$scope.PageIndex = 1;
$scope.currentPage=1;
//$scope.noMorePage=false; $scope.domain = url;
var name = $location.search().name; /****************页面载入方法************************/
$http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems.content;
}) /****************刷新方法************************/
$scope.doRefresh = function() {
//alert($scope.currentPage);
$scope.currentPage=1;
$scope.noMorePage=false; //console.log($scope.PageIndex);
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city; $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems.content;
}) $scope.$broadcast('scroll.refreshComplete'); }; /*
function a(){
var i = 2;
function b(){
//alert(i++);
var page = i++;
return page;
}
return b;
}
var c = a();
*/ /*************查询方法*************/
$scope.doSearch = function() {
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city; $scope.currentPage=1;
$scope.noMorePage=false; //alert(start);
$http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1')
.success(function(newItems) {
console.log(newItems.content);
//newItems.content;
$scope.items = newItems.content; })
//$scope.$broadcast('scroll.infiniteScrollComplete');
}; /****************加载方法************************/ $scope.loadMore=function(){
var start = $scope.start;
var goods = $scope.goods;
var now_city = $scope.now_city;
//var p = c(); //$scope.PageIndex++;
$scope.currentPage += 1;
//console.log($scope.currentPage); $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
//$scope.items.push(newItems.content);
//console.log($scope.items);
//var objs =[{a:1},{a:2}];
//angular.forEach(newItems.content, function(data,index,array){
//data等价于array[index]
//console.log(newItems.content); if ( newItems.content == null){
$scope.noMorePage=true;
} var length = newItems.content.length; for (var i=0;i<length;i++)
{
$scope.items.push(newItems.content[i]);
} if (newItems.content.length < 10) {
$scope.noMorePage=true;
} //}); $scope.$broadcast('scroll.infiniteScrollComplete'); }) //$scope.havaMore=false;
}; }]) </script> <style>
body,input,h2{
font-family:Microsoft YaHei;
}
.icon{
color: #808080;
list-style-type: none; font-size: 2em;
}
.price{
border-radius: 5px;
background: red;
color: white;
font-size: 0.9em;
padding-top:0.2em;
}
a{
text-decoration:none;
color:black;
}
</style> </head> <body ng-app="starter" > <ion-content ng-controller="actionsheetCtl" >
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <div class="row"> <div class="col col-25">
<div class="col-demo"> <div class="item item-input ">
<input type="text" placeholder="地址" ng-model="start">
</div> </div>
</div> <!-- <div class="col col-10">
<center><li class="ion-arrow-swap icon" style="margin-top: 40%;" ></li></center>
</div>--> <div class="col col-25">
<div class="col-demo"> <div class="item item-input ">
<input type="text" placeholder="产品" ng-model="goods" >
</div> </div>
</div> <div class="col col-30"> <label class="item item-input item-select"> <div class="input-label">
种类
</div> <select ng-model="now_city">
<option value ="">全部</option>
<option value ="蔬菜">蔬菜</option>
<option value ="果品">果品</option>
<option value="粮油">粮油</option>
<option value="水产品">水产品</option>
<option value="畜产品">畜产品</option>
</select> </label> </div> <button class="ion-search icon button button-icon" ng-click="doSearch()"></button> </div> <ion-list> <div class="content ionic-pseudo card" ng-repeat="item in items" > <div class="list list-inset"> <div class="item item-thumbnail-left">
<img src="{{domain}}/upload/{{item.pic}}.png"> <div class="row">
<div class="col"> <h2>{{item.goods}}</h2></div>
<div class="col"> <div class="price"><center>￥{{item.price}}</center></div> </div>
</div> <h2 >发布日期：{{item.date}}</h2>
<h2 >供货地址：{{item.start}}</h2> </div> <div class="item">
<div class="row">
<div class="col"> <center style="color:#F0AB4B">发布人：{{item.name}}</center></div>
<div class="col"> <center style="color:#97D152">种类：{{item.now_city}}</center></div>
</div>
</div> <div class="item">
<div class="row" >
<div class="col" style="border-right:1px solid #F0EFF1"> <center>
<h2 style="color:#0779FF;
font-weight:bold;"><a href="tel:{{item.phone1}}">给TA打电话</a></h2>
</center> </div>
<div class="col">
<center>
<h2 style="color:#0779FF;
font-weight:bold;"><a ng-href="sms:{{item.phone1}}">给TA发短信</a></h2>
</center> </div>
</div>
</div> </div> </div> </ion-list> <ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll> </ion-content> </body>
</html>
ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项的更多相关文章
- XRecyclerView：实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView
介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...
- 滚动到底部加载更多及下拉刷新listview的使用
最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...
- ionic-Javascript：ionic 上拉菜单(ActionSheet)
ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) 1.返回顶部 1. ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet) ...
- Android中GridView滚动到底部加载数据终极版
之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...
- ionic上拉加载更多解决方法
第一步: $scope.hasmore = true;//是否允许上拉加载 $scope.num = 8;//显示条数 第二步://查询显示内容,查出所有的 $scope.Group = functi ...
- ionic上拉加载组件 ion-infinite-scroll自动调用多次的问题
参考文章地址:http://www.cnblogs.com/luleixia/p/6402418.html ionic 一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面 ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数: 当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题
ionic 中一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数:当然,主要会导致首次调用的时候,会执行几次加载更多的函数: ...
- ionic 上拉加载问题（分页）
问题描述: 1.第一初始化时执行了上拉加载更多. 2.上拉时存在执行多次加载动作. angularjs的ajax不提供同步机制,是为了防止页面长时间等待,很多时候我们又需要这种同步机制交换状态,比如上 ...
随机推荐
- A线段树
线段树专题 顾琪坤 1.简介: 打acm的时候,经常会碰到一类问题,比方给你n个数的序列,然后动态的更改某些数的值,然后又动态地询问某个区间的值的和或者其它乱七八糟的东西,对于单个更改或者询问,也许很 ...
- cmd下常用的一些命令
1.calc计算器 2.Mspaint画图 3.Netstat -anb查看端口 输入netstat -anb时可能会遇到下面问题 只要到搜索框输入cmd,然后到其快捷方式上右击以管理员身份运行即可 ...
- CVE-2013-3908 Internet Explorer打印预览功能可导致信息泄露
原文:http://masatokinugawa.l0.cm/2014/11/ie-printpreview-infoleak.html 问题1: 在IE9和以前的版本当中进行打印预览操作时,IE会取 ...
- 星外虚拟主机跨web目录文件读取漏洞
星外虚拟主机跨目录读取文件漏洞,需要一定条件. 问题发生在以下文件,这些文件都没有严格的设置执行权限,当前的IIS用户能够顺利的利用它们执行命令: c:\windows\7i24IISLOG.exe ...
- 学习之痛（数据库->存储过程和函数）
存储过程和函数作为数据库的一部分,为什么是学习之痛. 项目实际开发,考虑性能和代码维护,绝对不用存储过程. 如果单纯自己写个小程序糊弄人玩,还可以写写. [学习] 在数据库中定义一些SQL语句集合,然 ...
- 动态input file多文件上传到后台没反应的解决方法！！！
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...
- Apache Spark源码走读之1 -- Spark论文阅读笔记
欢迎转载,转载请注明出处,徽沪一郎. 楔子 源码阅读是一件非常容易的事,也是一件非常难的事.容易的是代码就在那里,一打开就可以看到.难的是要通过代码明白作者当初为什么要这样设计,设计之初要解决的主要问 ...
- 一些Discuz!代码
首行缩进2字符 [code][p=20, 2, left]首行缩进2字符[/p][/code]
- Yii源码阅读笔记（二）
接下来阅读BaseYii.php vendor/yiisoft/yii2/BaseYii.php—— namespace yii; use yii\base\InvalidConfigExceptio ...
- osal_start_timerEx(Lock_TaskID,SBP_START_DEVICE_EVT,SBP_PERIODIC_EVT_PERIOD)的理解
osal_start_timerEx(Lock_TaskID,SBP_START_DEVICE_EVT,SBP_PERIODIC_EVT_PERIOD)与osal_set_event(Music_Ta ...