Javascript下拉刷新效果

日期：2020-06-26 栏目：前端经验浏览：次

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>下拉刷新</title>
<style>
body {
    margin: 0;
    position: absolute;
    width: 100%;
}
.loading {
    line-height: 40px;
    height: 0;
    text-align: center;
    transition: height .25s, border-bottom-width .25s;
    background-color: #eee;
    font-size: 14px;
    overflow: hidden;
}
</style>
</head>
<body>
<div id="loading" class="loading">下拉加载...</div>
<ol id="result">
</ol>
<script src="https://cs.m.xczhihui.com/xcview/html/demo/js/zepto.min.js"></script>
<script src="https://cs.m.xczhihui.com/xcview/html/demo/js/loading.js"></script>
<script>
var fnCreateList = function () {
    var html = '';
    for (var index = 0; index < 100; index += 1) {
        html = html + '<li>列表'+ (Math.random() + '').slice(-1 * Math.ceil(10 * Math.random())) +'</li>'
    }
    $('#result').html(html);
};
fnCreateList();  //获取内容列表

// 下面是演示代码
new DragLoading($('#loading'), {
    trigger: $('#result'),
    onReload: function () {
        var self = this;
        setTimeout(function () {
            fnCreateList();
            self.origin();
        }, 2000* Math.random());
    }
});
</script>
</body>
</html>

转载注明出处：http://www.duanlonglong.com/qdjy/249.html

Javascript下拉刷新效果

相关推荐