AnglarJs之下拉刷新

簡介

下拉刷新，是目前手機網站刷新數據的一種常用方式，本文主要講解AnglarJs集成，下拉刷新功能

實現

頁面

    <div id="container" class="scroller" >
                <div class="loading" align="center" style="margin-bottom: 2%;width: 100%;margin-top: -15%;">
                    下拉刷新數據
                </div>
          <!--內容寫在這裏-->
 </div>

• controller中下拉刷新功能使用

app.controller('indexCtrl', ['$scope','refreshService', function ($scope,refreshService) {

  $scope.slide = new refreshService({container:'#container',next: function (e) {
           //鬆手之後執行邏輯,ajax請求數據，數據返回後隱藏加載中提示
           var that = this;
           $scope.loading();
           setTimeout(function () {
               that.back.call();
           },200);

       }});

• 封裝下拉刷新RefreshService.js

/**
 * Created by FANQIBU on 2018/1/11.
 */
define(["jquery", "app"], function($, app) {
    app.service("refreshService", [  function() {
        var slide = function (option) {
            var defaults={
                container:'',
                next:function(){}
            };
            var start,
                end,
                length,
                isLock = false,//是否鎖定整個操作
                isCanDo = false,//是否移動滑塊
                isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
                hasTouch = 'ontouchstart' in window && !isTouchPad;
            var obj = document.querySelector(option.container);
            var loading=obj.firstElementChild;
            var offset=loading.clientHeight;
            var objparent = obj.parentElement;
            /*操作方法*/
            var fn =
            {
                //移動容器
                translate: function (diff) {
                    obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
                    obj.style.transform='translate3d(0,'+diff+'px,0)';
                },
                //設置效果時間
                setTransition: function (time) {
                    obj.style.webkitTransition='all '+time+'s';
                    obj.style.transition='all '+time+'s';
                },
                //返回到初始位置
                back: function () {
                    fn.translate(0 - offset);
                    //標識操作完成
                    isLock = false;
                },
                addEvent:function(element,event_name,event_fn){
                    if (element.addEventListener) {
                        element.addEventListener(event_name, event_fn, false);
                    } else if (element.attachEvent) {
                        element.attachEvent('on' + event_name, event_fn);
                    } else {
                        element['on' + event_name] = event_fn;
                    }
                }
            };

            fn.translate(0-offset);
            fn.addEvent(obj,'touchstart',start);
            fn.addEvent(obj,'touchmove',move);
            fn.addEvent(obj,'touchend',end);
            fn.addEvent(obj,'mousedown',start)
            fn.addEvent(obj,'mousemove',move)
            fn.addEvent(obj,'mouseup',end)

            //滑動開始
            function start(e) {
                var even = typeof event == "undefined" ? e : event;
                if(even != undefined && even.touches != undefined && even.touches.length >0){
                    if(even.touches[0].pageY<650){
                        if (objparent.scrollTop <= 0 && !isLock) {
                            var even = typeof event == "undefined" ? e : event;
                            //標識操作進行中
                            isLock = true;
                            isCanDo = true;
                            //保存當前鼠標Y座標
                            start = hasTouch ? even.touches[0].pageY : even.pageY;
                            //消除滑塊動畫時間
                            fn.setTransition(0);
                            loading.innerHTML='下拉刷新數據';
                        }
                    }
                }
                return false;
            }

            //滑動中
            function move(e) {
                if (objparent.scrollTop <= 0 && isCanDo) {
                    var even = typeof event == "undefined" ? e : event;
                    //保存當前鼠標Y座標
                    end = hasTouch ? even.touches[0].pageY : even.pageY;
                    if (start < end) {
                        even.preventDefault();
                        //消除滑塊動畫時間
                        fn.setTransition(0);
                        //移動滑塊
                        if((end-start-offset)/2<=150) {
                            length=(end - start - offset) / 2;
                            fn.translate(length);
                        }
                        else {
                            length+=0.3;
                            fn.translate(length);
                        }
                    }
                }
            }
            //滑動結束
            function end(e) {
                if (isCanDo) {
                    isCanDo = false;
                    //判斷滑動距離是否大於等於指定值
                    if (end - start >= offset) {
                        //設置滑塊回彈時間
                        fn.setTransition(1);
                        //保留提示部分
                        fn.translate(0);
                        //執行回調函數
                        loading.innerHTML='正在刷新數據';
                        if (typeof option.next == "function") {
                            option.next.call(fn, e);
                        }
                    } else {
                        //返回初始狀態
                        fn.back();
                    }
                }
            }
        };
        return slide;
    }])
});

效果