使用原生js+css3實現下拉刷新效果

時間 2019-12-13

標籤使用原生 js+css3 css 實現下拉刷新效果欄目 JavaScript 简体版

原文原文鏈接

原生app裏的數據列表都會使用下拉刷新的效果，在webapp裏能夠採用iscroll、swiper等插件或框架實現，那麼如何本身編碼實現相似的效果呢，下面介紹使用原生js+css3實現的簡單效果。css

html佈局html

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no">
<title>test</title>
<style type="text/css" media="screen">
    body{margin: 0;}
    ul{list-style: none;padding: 0;}
    li{height: 30px;border-bottom: 1px solid #ddd;line-height: 30px;padding-left: 10px;}
    .scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;}
    .scroller{-webkit-overflow-scrolling:touch;}
</style> 
</head> 
<body > 
<div id="container" class="scroller" >
<div class="loading">
   下拉刷新數據
</div>
<ul>
    <li><a href="#">列表數據1</a></li>
    <li><a href="#">列表數據2</a></li>
    <li><a href="#">列表數據3</a></li>
    <li><a href="#">列表數據4</a></li>
    <li><a href="#">列表數據5</a></li>
    <li><a href="#">列表數據6</a></li>
    <li><a href="#">列表數據7</a></li>
    <li><a href="#">列表數據8</a></li>
    <li><a href="#">列表數據9</a></li>
    <li><a href="#">列表數據10</a></li>
    <li><a href="#">列表數據11</a></li>
    <li><a href="#">列表數據12</a></li>
    <li><a href="#">列表數據13</a></li>
    <li><a href="#">列表數據14</a></li>
    <li><a href="#">列表數據15</a></li>
    <li><a href="#">列表數據16</a></li>
    <li><a href="#">列表數據17</a></li>
    <li><a href="#">列表數據18</a></li>
    <li><a href="#">列表數據19</a></li>
    <li><a href="#">列表數據20</a></li>
    <li><a href="#">列表數據21</a></li>
    <li><a href="#">列表數據22</a></li>
    <li><a href="#">列表數據23</a></li>
    <li><a href="#">列表數據24</a></li>
    <li><a href="#">列表數據25</a></li>
    <li><a href="#">列表數據26</a></li>
    <li><a href="#">列表數據27</a></li>
    <li><a href="#">列表數據28</a></li>
    <li><a href="#">列表數據29</a></li>
    <li><a href="#">列表數據30</a></li>
</ul> 
</div>
<body>
</html>

js邏輯css3

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) {
        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();
            }
        }
    }
}
slide({container:"#container",next: function (e) {
    //鬆手以後執行邏輯,ajax請求數據，數據返回後隱藏加載中提示
    var that = this;
    setTimeout(function () {
        that.back.call();
    }, 2000);
}});

代碼不是不少，細節還需完善。這次的學習結果是參考http://www.111cn.net/wy/js-ajax/87990.htm這篇文章完成web