js手机端下拉刷新效果demo效果示例（整理）
生活随笔
收集整理的這篇文章主要介紹了
js手机端下拉刷新效果demo效果示例（整理）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
總結
以上是生活随笔為你收集整理的js手机端下拉刷新效果demo效果示例（整理）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【180720】微软Windows扫雷游
- 下一篇： 07-CBAM_block注意力机制