OnsenUI实现下拉刷新

刺骨的言语ヽ痛彻心扉 2022-04-22 07:06 180阅读 0赞

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

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

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

## 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函数。

[20181107145636343.png]: /images/20220422/2a4614fb551c442daf94310a789cfe33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220422/0b475ebb4708497699bc0054762fb83a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220422/18f2874afa8845e2934385b7838f0666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 2]: /images/20220422/785b53cd81f948edaf1c54d5a98c241c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 3]: /images/20220422/3ac239692f43491f9c529e032885eba6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 4]: /images/20220422/137b9624921f4a22a82e81bf9c13a02e.png