iscroll下拉或上滑加载更多内容分页
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div id="wrapper"> <di即枢潋雳v id="scroller"> <div id="scroller-pullDown"> <span id="down-icon" class="icon-double-angle-down pull-down-icon"></span> <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span> </div> <div id="scroller-content"> <ul id="list"> <li>默认数据1</li> <li>默认数据2</li> <li>默认数据3</li> <li>默认数据4</li> <li>默认数据5</li> <li>默认数据6</li> <li>默认数据7</li> <li>默认数据8</li> <li>默认数据9</li> <li>默认数据10</li> <li>默认数据11</li> <li>默认数据12</li> <li>默认数据13</li> <li>默认数据14</li> <li>默认数据15</li> <li>默认数据16</li> <li>默认数据17</li> <li>默认数据18</li> <li>默认数据19</li> <li>默认数据20</li> <li>默认数据21</li> <li>默认数据22</li> <li>默认数据23</li> <li>默认数据24</li> <li>默认数据25</li> <li>默认数据26</li> <li>默认数据27</li> <li>默认数据28</li> <li>默认数据29</li> <li>默认数据30</li> </ul> </div> <div id="scroller-pullUp"> <span id="up-icon" class="icon-double-angle-up pull-up-icon"></span> <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span> </div> </div></div>
3、书写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}
4、书写并添加js代码。<script src="/jquery.min.js"></script><script src="js/iscroll.js"></script><script src="js/loading.js"></script>
5、代码整体结构。
6、查看效果。
