溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了ionic實現下拉刷新功能的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ionic</title>
<!--記得導入ionic包和ionic樣式-->
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css" rel="external nofollow" />
<!--
ionic
angular
$http--服務
ng- 指令
表達式 {{}}
刷新案例
ul--
數據
-->
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar class="bar-calm">
<h2 class="title">下拉刷新</h2>
</ion-header-bar>
<ion-content>
<!--
下拉刷新
ion-refresher
pulling-text 下拉的時候顯示的文本
pulling-icon 圖標
onRefresh 當刷新的時候調用的方法
-->
<ion-refresher pulling-text="松手刷新..." on-refresh = "doRefresh()" pulling-icon="img/arrow-down-c.png">
</ion-refresher>
<ul class="list">
<li class="item" ng-repeat="good in goods">{{good.gname}}</li>
</ul>
</ion-content>
<!--
angular
mvc 視圖 view 各種標簽，數據 ng-model{{}} ，控制器 controller 邏輯代碼
指令：一個特殊的屬性
表達式 ： 一段代碼 ，主要功能：取數據，可以進行運算
模塊：一些功能和視圖組成的整體
服務：就是一個方法，滿足一些需要而定義的方法。內置服務30多個
$http
內置過濾器：9個
管道符 |
-->
<script type="text/javascript">
//創建模塊
var mod = angular.module("myApp",["ionic"]);//[]里面的是需要注入的對象。兩個:ngRoute /ionic
//創建控制器
mod.controller("myCtrl",function($scope,$http){
//定義數組、也就是model數據
$scope.goods=[{"gname":"秋褲"},{"gname":"羽絨服"}];
//刷新的方法
$scope.doRefresh=function(){
//請求網絡，加載數據
$http.get("data.json").then(function(req){
//取得數據 ,req將數據封裝到data屬性里面了
var d = req.data;
//將一個集合整個加入另外一個集合contact()
// $scope.goods= $scope.goods.contact(d);
for (var i =0;i<d.length;i++) {
$scope.goods.unshift(d[i]);
}
//結束刷新
$scope.$broadcast("scroll.refreshComplete");
},function(req){
alert("失敗");
});
// .finally(function(){
//
// });
}
});
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
