ionic 下拉刷新 — ion-refresher

發(fā)布時(shí)間：2020-08-02 04:34:21 來源：網(wǎng)絡(luò) 閱讀：744 作者：VIP_web 欄目：開發(fā)技術(shù)

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

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

HTML 代碼

ion-refresher ：即為下拉刷新的圖標(biāo)；
pulling-text=“下拉刷新” 這里的問題可以隨意更換，喜歡就好；
on-refresh=”doRefresh()” 這個(gè)便是當(dāng)下拉的時(shí)候我們要執(zhí)行的方法，這里便是刷新頁面的數(shù)據(jù)。

<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>

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

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

向AI問一下細(xì)節(jié)

ionic 下拉刷新 — ion-refresher

HTML 代碼

JavaScript 代碼

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽