一、上下拉新，下拉加载
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <meta charset="utf-8" /> <title>下拉刷新例子</title> <link href="http://www.itxst.com/package/minirefresh2/minirefresh.css" rel="stylesheet" /> <script src="http://www.itxst.com/package/minirefresh2/minirefresh.js"></script> <script src="http://www.itxst.com/js/jquery.js"></script> <style> .list { width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; background-color: #f1f1f1; border: solid 1px #ddd; border-radius: 3px; } </style> </head> <body> <div id="mrefresh" class="minirefresh-wrap"> <div class="minirefresh-scroll"> <!-- 这里放你要被下拉的区域 --> <div class="list"> <ul> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> </ul> </div> </div> </div> <script> var mRefresh = new MiniRefresh({ container: '#mrefresh', //这里是插件的容器ID down: { isAuto: true, //打开页后自动执行callback里的方法，如getData successAnim: { isEnable: true },//isEnable true可以看到下拉动画 false 没有动画 offset:75,//触发下拉的阈值，当下拉距离大于这个阈值后，在松开时会触发下拉刷新，重要比如你自己的网页顶部有给固定的toolbar则需要用到这个配置 dampRateBegin:1, //阻尼系数，下拉小于offset时的阻尼系数，值越接近0,高度变化越小,表现为越往下越难拉，默认值就行 dampRate:0.3, callback: function () { // 下拉后的回调事件 getData(); mRefresh.endDownLoading(); } , onCalcel: function () { //下拉到一半，放弃刷新执行的事件 calcelMsg(); } }, up: { isAuto: false, loadFull:{ isEnable:true, delay:1000 }, callback: function () { // 向上拉后的回调事件 getData(); } } }); var pos = 0; function getData() { for (var i = pos; i < pos+ 50; i++) { $(".list ul").append("<li>新数据" + i + "</li>"); } //下拉没有内容 结束动画 pos = pos + 50; if (pos > 100) mRefresh.endUpLoading(true);//数据全部加载完了，再上拉也不会触发up回调事件 else mRefresh.endUpLoading(false); //后台还有数据可加载，用户再次向上滑动还会触发事件 } function calcelMsg() { $(".list ul li").remove(); $(".list ul").append("<li>你放弃了刷新</li>"); } </script> </body> </html>