ionic 下拉刷新 上拉加载更多

1、HTML

<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-infinite-scroll ng-if="hasMore()" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
    </ion-content>
</ion-pane>

2、controller

appControllers.controller('RefreshCtrl', function ($scope, $timeout, $http) {
    $scope.hasValue = true;
    $scope.pageIndex = 1;
    $scope.items = [
        { "id": 1, "name": "C#" },
        { "id": 2, "name": "C++" },
        { "id": 3, "name": ".Net" },
        { "id": 4, "name": "Android" },
        { "id": 5, "name": "Ios" },
        { "id": 6, "name": "HTML5" },
        { "id": 7, "name": "JavaScript" },
        { "id": 8, "name": "Css3" },
        { "id": 9, "name": "Ionic" },
        { "id": 10, "name": "AngularJS" },
        { "id": 11, "name": "Php" },
        { "id": 12, "name": "Java" },
        { "id": 13, "name": "C" },
        { "id": 14, "name": "SQL Server" },
        { "id": 15, "name": "Flash" },
        { "id": 16, "name": "MongoDB" }
    ];

    $scope.doRefresh = function () {
        console.log("ion-refresher");
        /*
        $http.get('http://www.shouce.ren/try/demo_source/item.json')//注意改为自己本站的地址,不然会有跨域问题
            .success(function (newItems) {
                $scope.items = newItems;
            })
            .finally(function () {
                $scope.$broadcast('scroll.refreshComplete');
            });
        */
        $scope.items = [
            { "name": "菜鸟教程" },
            { "name": "www.runoob.com" }
        ];
        $scope.$broadcast('scroll.refreshComplete');
    };

    $scope.hasMore = function () {
        return $scope.hasValue;
    }

    $scope.loadMore = function () {
        console.log("ion-infinite-scroll");
        var moreData = [
            { "id": 17, "name": "电子商务" + $scope.pageIndex },
            { "id": 18, "name": "互联网" + $scope.pageIndex },
            { "id": 19, "name": "交通" + $scope.pageIndex },
            { "id": 20, "name": "教育" + $scope.pageIndex }
        ];
        $scope.items = $scope.items.concat(moreData);
        if ($scope.pageIndex > 5) {
            $scope.hasValue = false;
        }
        $scope.pageIndex++;
        $scope.$broadcast('scroll.infiniteScrollComplete');
    }
})



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Angular2移动端中实现上拉加载下拉刷新的方式有许多种。下面我将介绍一种常用的实现方法。 1. 首先,我们需要引入一些必要的库和组件。我们可以使用Ionic框架中提供的IonRefresher和InfiniteScroll组件来实现下拉刷新上拉加载的效果。需要确保已经安装了Ionic框架并引入了相关的模块。 2. 在需要实现上拉加载的页面或组件中,添加一个IonRefresher组件,并绑定事件。例如: ```html <ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <!--其他内容--> </ion-content> ``` 在组件中,定义一个doRefresh方法来处理刷新的逻辑。例如: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { doRefresh(event) { // 执行刷新逻辑 // 更新数据 // 结束刷新动作 event.complete(); } } ``` 3. 接下来,我们来实现上拉加载的效果。在页面或组件中添加一个InfiniteScroll组件,并绑定事件。例如: ```html <ion-content (ionInfinite)="loadMore($event)"> <!--其他内容--> <ion-infinite-scroll> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content> ``` 在组件中,定义一个loadMore方法来处理加载更多的逻辑。例如: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { loadMore(event) { // 执行加载更多逻辑 // 加载更多数据 // 结束加载更多动作 event.complete(); } } ``` 以上就是使用Ionic框架中的IonRefresher和InfiniteScroll组件来实现Angular2移动端上拉加载下拉刷新的步骤。需注意在具体的业务逻辑中,需要结合实际情况进行相应的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值