iscroll下拉或上滑加载更多内容分页

新建html文档。

书写hmtl代码。

书写css代码。#wrapper{position:absolute;z-index:1;top:0;bottom:0;left:0;width:100%;background:#fff;overflow:hidden}#scroller{position:absolute;z-index:1;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none}#scroller-pullDown,#scroller-pullUp{background:#fff;height:40px;line-height:40px;padding:5px 10px;font-weight:bold;font-size:14px;color:#888;text-align:center;position:absolute;left:0;width:100%}#scroller-pullDown{top:-40px}#scroller-pullUp{bottom:-40px}#scroller-pullDown .pull-up-msg,#scroller-pullUp .pull-down-msg{padding-left:20px}#scroller-pullDown .pull-down-icon,#scroller-pullUp .pull-up-icon{display:inline-block;color:red;font-size:1.4;-webkit-transform:rotate(0);-webkit-transition-property:-webkit-transform;-webkit-transition-duration:500ms}#scroller-pullDown .pull-down-icon.reverse_icon,#scroller-pullUp .pull-up-icon.reverse_icon{-webkit-transform:rotate(-180deg)}#scroller ul{list-style:none;padding:0;margin:0;width:100%;text-align:left}#scroller li{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px}

书写并添加js代码。

代码整体结构。

查看效果。