网页版上拉下拉

最新推荐文章于 2022-09-04 12:39:56 发布

yin_chenglong

最新推荐文章于 2022-09-04 12:39:56 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/80092784

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/ionic.min.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script>
var app = angular.module("myApp",['ionic']);
app.controller("myCtrl",function($scope,$http){
$scope.itmes = ["C语言","B语言","D语言","C1语言","B2语言","D3语言","C4语言","B5语言","D6语言","C7语言","B8语言","D9语言","C11语言","B12语言","D13语言"];

$scope.refreshBooks = function(){
$http({
method:"get",
url:"books.json"
}).then(function success(response){
var newbooks = response.data;

$scope.itmes = newbooks;
debugger;
},function error(response){

}).finally(function(){//刷新完数据后，关闭刷新图标
$scope.$broadcast("scroll.refreshComplete");
});
}

$scope.count = 1;
$scope.loadMore = function(){
var s = "aaa"+$scope.count;
$scope.itmes.push(s);
$scope.count++;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button">返回</button>
</div>
<span class="title">1603L书城</span>
<div class="buttons">
<button class="button">添加</button>
</div>
</ion-header-bar>
<ion-content>

<ion-refresher pulling-text="下拉刷新..." on-refresh="refreshBooks();"></ion-refresher>
<ion-list>
<ion-item ng-repeat="s in itmes track by $index">{{s}}</ion-item>
</ion-list>

<ion-infinite-scroll on-infinite="loadMore();" distance="1%"></ion-infinite-scroll>
</ion-content>
</body>
</html>

yin_chenglong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页版上拉下拉

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;title&gt;&lt;/ti
复制链接

扫一扫