用HbuilderX开发混合APP的时候常用的上拉、下拉加载数据功能，稍微改改美化下样式就可以愉快的装B了，废话不多说直接贴代码。
<!DOCTYPE html>
<html>
<head>
<title>HTML5+原生上拉、下拉组件</title>
</head>
<body>
<div>
<ul id="list" style="list-style:none;margin:0;padding:0;">
<li><span>Initializ List Item 1</span></li>
<li><span>Initializ List Item 2</span></li>
<li><span>Initializ List Item 3</span></li>
<li><span>Initializ List Item 4</span></li>
<li><span>Initializ List Item 5</span></li>
<li><span>Initializ List Item 6</span></li>
<li><span>Initializ List Item 7</span></li>
<li><span>Initializ List Item 8</span></li>
<li><span>Initializ List Item 9</span></li>
<li><span>Initializ List Item 10</span></li>
<li><span>Initializ List Item 11</span></li>
<li><span>Initializ List Item 12</span></li>
<li><span>Initializ List Item 13</span></li>
<li><span>Initializ List Item 14</span></li>
<li><span>Initializ List Item 15</span></li>
<li><span>Initializ List Item 16</span></li>
<li><span>Initializ List Item 17</span></li>
<li><span>Initializ List Item 18</span></li>
<li><span>Initializ List Item 19</span></li>
<li><span>Initializ List Item 20</span></li>
</ul>
</div>
<script>
var ws = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
// 下拉刷新...
ws = plus.webview.currentWebview();
ws.setPullToRefresh({
support: true,
style: "circle",
height: "50px",
range: "100px"
}, function () {
setTimeout(function () {
alert("下拉刷新++++++++");
ws.endPullToRefresh();
}, 1000);
});
// 加载更多...
document.addEventListener("plusscrollbottom", function () {
console.log("滚动到底部 ===========")
}, false);
}
// 判断扩展API是否准备，否则监听"plusready"事件
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
</script>
</body>
</html>