下拉重新整理效果
阿新 • • 發佈：2018-11-08
<!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>
