时间:2021-07-01 10:21:17 帮助过:2人阅读
滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。
首先是html结构:
- <div class=" saleRecord panelList clear" style="position:relative;height:400px;">
- <div id="wrapper">
- <div id="scroller">
- <ul id="thelist">
- @foreach (var item in ViewBag.***)
- {
- if (item.IsPay == true)
- {
- <li>
- <div class="panelListItemForALL">
- <table class="allRecordTable">
- <tbody>
- <tr>
- <td>***</td>
- <td>@item.***</td>
- </tr>
- <tr>
- <td>***</td>
- <td>@item.***</td>
- </tr>
- <tr>
- <td>***</td>
- <td>@item.***</td>
- </tr>
- </tbody>
- </table>
- </div>
- </li>
- }
- }
- </ul>
- <div id="more">加载更多</div>
- </div>
- </div>
然后是css样式:
- #wrapper {
- position: absolute;
- z-index: 1;
- top: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- 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;
- }
- #more
- {
- text-align:center;
- }
需要的话,给父元素套上position:relative属性
最后是脚本中的初始化和获取数据:
- var pagenum = 1, update = true, id=ID;
- var myScroll;
- setTimeout(function(){
- myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
- myScroll.on('scrollEnd', function () {
- //console.log(this.y +"|||"+this.maxScrollY);
- //如果滑动到底部,则加载更多数据(距离最底部10px高度)
- if ((this.y - this.maxScrollY) == 0) {
- getMore();
- }
- });
- },100 );
- function getMore() {
- var that = document.getElementById("more");
- pagenum++;
- $.ajax({
- url: '/***/getPage',
- data: {'currentPage':pagenum,'id':id},
- type: 'POST',
- datatype: "json",
- success: function (data) {
- //alert(data);
- var list = data.List;
- if (list.length < 1) {
- pagenum--; that.innerHTML = "已经没有更多了..."; return;
- }
- var ul = document.getElementById("thelist");
- for (var i = 0; i < list.length; i++) {
- var str = "<li>";
- str += "<div class=\"panelListItemForALL\"><table class=\"allRecordTable\"><tbody><tr><td>***</td><td>"+list[i].OrderCode+"</td>";
- str += "</tr><tr><td>***</td><td>"+list[i].GoodsName+"</td></tr>";
- str += "<tr><td>***</td><td>"+ data.DatatimeArray[i] +"</td>";
- str += "</tr></tbody></table></div>";
- str += "</li>";
- ul.innerHTML += str;
- myScroll.refresh();
- }
- }
- });
- }
把相应的数据填充进去就好,当然控制器里要写一个分页获取数据的方法,通过这里的ajax获取。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。