欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AnglarJs之下拉刷新

程序员文章站 2024-03-22 22:43:40
...

简介

下拉刷新,是目前手机网站刷新数据的一种常用方式,本文主要讲解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;
    }])
});

效果

AnglarJs之下拉刷新
AnglarJs之下拉刷新