在做項(xiàng)目的時(shí)候一般會(huì)遇到下拉刷新的功能，我不知道大家平時(shí)是怎么實(shí)現(xiàn)的。因?yàn)槲覀儸F(xiàn)階段使用的是 ionic，所以我就學(xué)習(xí)了一下利于框架去實(shí)現(xiàn)下拉刷新的功能。下面給家說一下怎么用ionic實(shí)現(xiàn)頁面的下拉刷新吧。

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專業(yè)的網(wǎng)站策劃、做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10余年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都上千余家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

具體的實(shí)現(xiàn)請(qǐng)看下面的源碼：

HTML 代碼

• ion-refresher ： 即為下拉刷新的圖標(biāo)；

• pulling-text=“下拉刷新” 這里的問題可以隨意更換，喜歡就好；

• on-refresh=”doRefresh()” 這個(gè)便是當(dāng)下拉的時(shí)候我們要執(zhí)行的方法，這里便是刷新頁面的數(shù)據(jù)。

JavaScript 代碼

• $scope.items[ ] 這個(gè)是頁面剛進(jìn)來的數(shù)據(jù)

• doRefresh () 顯然這個(gè)是當(dāng)你要刷新的時(shí)候所執(zhí)行的方法

• item.json 這個(gè)就是當(dāng)你點(diǎn)擊刷新后我們就要從新獲取數(shù)據(jù) 這個(gè)json就是最近的數(shù)據(jù)，項(xiàng)目中就是你要從新從服務(wù)器拿一次數(shù)據(jù)并且更新到客戶端。

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() {
        //注意改為自己本站的地址，不然會(huì)有跨域問題
        $http.get('http://www.aliyue.net/demo_source/item.json') 
            .success(function(newItems) {
                $scope.items = newItems;
            })
            .finally(function() {
                $scope.$broadcast('scroll.refreshComplete');
            });
    };}])

item.json 文件數(shù)據(jù)：

[
    {
        "name":"菜鳥教程"
    },
    {
        "name":"www.aliyue.net" } ]

今天就介紹到這里，小伙伴自己動(dòng)手試試吧，改天給大家分享 ionic怎么實(shí)現(xiàn)上滑加載更多。祝大家學(xué)習(xí)愉快。 有什么疑問可以加群找我討論。歡迎大家哦！

=============================

小月博客：http://www.aliyue.net

小月博客web技術(shù)交流 308649768

=============================

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

本文題目：ionic下拉刷新—ion-refresher-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/gcgce.html