文档章节

使用原生js+css3实现下拉刷新效果

Jack088
 Jack088
发布于 2018/04/16 22:27
字数 884
阅读 10
收藏 0

原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll、swiper、mescroller等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果。

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逻辑

 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);
}});

本文转载自:https://segmentfault.com/a/1190000004370220

Jack088
粉丝 46
博文 579
码字总数 90270
作品 0
扬州
程序员
私信 提问
Weex中调用原生下拉刷新

Weex官方文档提供了下拉刷新和上拉刷新的内建组件和。但是功能单一且和App中原生的下拉刷新样式不一样,只能抛弃了。而前端自己写组件,效果也很难和原生保持一致。 组件在iOS的WeexSDK源码中...

HJaycee
2017/08/15
0
0
浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 。而实现上拉加载相对来说就比较不方便了。 下拉刷新 虽然微信的官方文档有很多坑,但下拉刷新介绍的还...

2018/02/05
0
0
React Native支持任意组件实现下拉刷新功能,并且可以自定义下拉刷新头部

1.背景   无论是Android还是ios,下拉刷新都是一个很有必要也很重要的功能。那么在RN(以下用RN表示React Native)之中,我们该如何实现下拉刷新功能呢?RN官方提供了一个用于ScrollView,Li...

请叫我百米冲刺
2017/06/22
0
0
前端必备自定义滚动库——iScroll

作者真的很懒,这篇文章从想法开始到现在都几个月了。😊 iScroll是什么 很多场景,如果使用body的滚动会很不方便,这时候,就会使用某个元素的局部滚动,恶心的事情就会发生了。 pc端web,...

chavesgu
05/21
0
0
iOS中UITableViewController自带的刷新控件

iOS中UITableViewController自带的刷新控件 一、引言 在iOS开发中,使用tableView的界面,大多会用到一个下拉刷新的的控件,第三方库中,我们一般会选择比较好用的MJRefresh,其实,在iOS6之...

珲少
2015/11/05
2.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

springboot 403 问题

添加WebAppConfigurer 配置 @Configuration@EnableAutoConfigurationpublic class WebAppConfigurer extends WebMvcConfigurerAdapter { public WebAppConfigurer() { } ......

布袋和尚_爱吃鱼
21分钟前
3
0
Python自动更换壁纸爬虫与tkinter结合

直接上代码 import ctypesimport timeimport requestsimport osfrom threading import Threadfrom tkinter import Tk, Label, Button,Entry,StringVar,messagebox# '放到AppData\Roami......

物种起源-达尔文
21分钟前
3
0
Postgresql Study 笔记

Postgresql 安装 Windows, MAC Install Postgresql 下载地址: https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Linux Install sudo apt-get update sudo apt-get in......

slagga
23分钟前
3
0
layer.open 打开新页面传参问题

如图所示,点击出售,把A页面的数据传到弹框上面,因为弹框比较复杂,所以使用引入一个新页面。 A.html a.js B.html b.js 1、第一种方案 sellInte: function (){ var obj = document.g...

木九天
26分钟前
4
0
沙龙报名 | 区块链数据服务技术应用实践

京东云是国内首家提供区块链数据在线分析服务产品的公司,也是行业内首家对区块链数据服务进行开源的公司。 本次沙龙是京东云BDS开源后,首次在深圳举办线下沙龙,我们将邀请京东云BDS团队核...

京东云技术新知
27分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部