OnsenUI实现下拉刷新

最新推荐文章于 2024-10-04 09:13:20 发布

F-ZERO-F

最新推荐文章于 2024-10-04 09:13:20 发布

阅读量638

点赞数

分类专栏： Hybrid App/React-Native 文章标签： AngularJs OnsenUI实现下拉刷新

本文链接：https://blog.csdn.net/sun_DongLiang/article/details/83684056

版权

Hybrid App/React-Native 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

在草稿箱里躺了数日之久，今天不能再让你发酵了。
一直在尝试混合开发的几套组合，在这一套中有些功能的实现需要进行一些总结，方便我在使用下一套框架进行相同的功能开发时能够关联性强一些，更易于理解，并且区分优劣；在这里我使用AngularJS+OnsenUI+Cordova进行混合开发，其中实现下拉刷新功能是由OnsenUI中的组件 ons-pull-hook完成的，本篇就来分析一下OnsenUI的下拉刷新的实现代码，为以后多个UI框架进行对比做准备。
文章中的代码是从官网上copy下来的，我在这里进行一些解释。
正所谓套路是我学的，但撩你是真心的。
不要怀疑我对待下拉刷新的真心。
在这里插入图片描述
首先要说明的是AngularJS的js文件必须要放在OnsenUI的js文件之前引入。

HTML代码

<!--HTML-->

<body ng-app="app">

<ons-page ng-controller="DemoController">

    <ons-pull-hook ng-action="load($done)" var="loader">
        <span ng-switch="loader.getCurrentState()">
            <span ng-switch-when="initial">//第一阶段
                <ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon>
                Pull down to refresh
            </span>
            <span ng-switch-when="preaction">//第二阶段
                <ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon>
                Release to refresh
            </span>
            <span ng-switch-when="action">//第三阶段
                <ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon>
                Loading data...
            </span>
        </span>
    </ons-pull-hook>

    <ons-toolbar>
        <div class="center">Pull to refresh</div>
        <div class="right">
            <ons-toolbar-button ng-click="reset()">Reset</ons-toolbar-button>
        </div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item ng-show="items.length === 0">
            <div class="info">
                Pull down to fetch items
            </div>
        </ons-list-item>
        <ons-list-item class="item" ng-repeat="item in items">
            <ons-row>
                <ons-col width="80px">
                    <img ng-src="http://lorempixel.com/60/60/?{{item.rand}}" class="item-thum">			   </img>
                </ons-col>
                <ons-col>
                    <p class="item-desc">{{ item.desc }}</p>
                </ons-col>
            </ons-row>
        </ons-list-item>
    </ons-list>
</ons-page>
</body>

运行结果：
在这里插入图片描述
分析：
1：ons-pull-hook是OnsenUI中用于向下拖动时实现刷新更新页面内容的组件；
2：ng-action="load($done)" 用于定义在下拉页面时的自定义行为，当下拉并释放时将执行此功能。load函数是在AngularJS的控制器中定义的后边会有代码。
可以使用一个$done函数告诉组件操作已完成。
3：下拉刷新有三种状态：
1）：initial
解释：
交互前最初的默认状态，一直到被拖下来超出高度限制之后就会变到下一个状态。用户拖动时显示：Pull down to refresh
在这里插入图片描述
2）：preaction
解释：
initial再继续往下拉就会出现这一状态，在这个状态时可以通过再次拖动页面来取消操作【在这个状态时是可逆的，再往下就不是可逆的了】；
操作是在释放后执行的。
用户拖动时显示：Release to refresh
在这里插入图片描述
3）：action
解释：
这个状态表明下拉刷新行为正在执行，同时在使用$done调用该函数后将会返回到initial状态，下载数据操作是在这一过程进行的。
用户拖动时显示： Loading data...

最终的效果为：
在这里插入图片描述

JavaScript代码：

angular.module('app',['onsen'])
    .controller('DemoController', function($scope, $timeout, $http) {
        $scope.items = [];
        $scope.load = function($done) {
            $timeout(function() {
                $http.jsonp('http://numbersapi.com/random/year?callback=JSON_CALLBACK')
                    .success(function(data) {
                        $scope.items.unshift({
                            desc: data,
                            rand: Math.random()
                        });
                    })
                    .error(function() {
                        $scope.items.unshift({
                            desc: 'No data',
                            rand: Math.random()
                        });
                    })
                    .finally(function() {
                        $done();
                    });
            }, 1000);
        };
        $scope.reset = function() {
            $scope.items.length = 0;
        }
    });

我们来分析一下JavaScript代码：
分析：
首先使用angularjs的方法注册一个控制器，引入$scope,$http,$timeout
1：定义一个load函数，函数中使用定时器，要注意为了实现跨域请求，我们使用http服务的jsonp请求，记住一定要在网址后面添加?callback=JSON_CALLBACK。这样才能实现跨域请求。
2：$http服务有三个函数，分别是成功的回调，失败的回调，还有finally最终必须要做的，要在最后执行传过来的$done。
3：图片是随机数，从一个链接中随机的生成图片进行展示；展示信息为desc，都是使用AngularJs的插值表达式进行读取展示出来。
4：在最前面声明了一个items[]数组$scope.items = [];在html页面中使用ng-repeat="item in items"进行遍历展示出来请求获取的信息；
5：定义一个reset函数$scope.items.length = 0;直接将函数的长度设置为0，表示清除数组的内容；当点击右上角的Reset之后就可以执行这个reset函数。