滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。
首先是html结构:
& lt; div class=" saleRecord小组辩论清楚”比;
& lt; div id=鞍捌鳌北?
& lt; div id=罢掌碇帷北?
& lt; ul id=皌helist”比;
@foreach (var ViewBag项目。* * *)
{
如果项目。IsPay==true)
{
& lt; li>
& lt; div类=皃anelListItemForALL”比;
& lt;表类=癮llRecordTable”比;
& lt; tbody>
& lt; tr>
& lt; td> * * * & lt;/td>
& lt; td> @item。* * * & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> * * * & lt;/td>
& lt; td> @item。* * * & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> * * * & lt;/td>
& lt; td> @item。* * * & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;/li>
}
}
& lt;/ul>
& lt; div id=案唷钡脑诩釉馗? lt;/div>
& lt;/div>
& lt;/div>
之前
然后是css样式:
#包装{
位置:绝对的;
z - index: 1;
上图:0;
底部:0;
左:0;
宽度:100%;
溢出:隐藏;
}
#照片卷轴{
位置:绝对的;
z - index: 1;
-webkit-tap-highlight-color: rgba (0, 0, 0, 0);
宽度:100%;
-webkit-transform: translateZ (0);
-moz-transform: translateZ (0);
-ms-transform: translateZ (0);
-o-transform: translateZ (0);
变换:translateZ (0);
-webkit-touch-callout:没有;
-webkit-user-select:没有;
-moz-user-select:没有;
-ms-user-select:没有;
用户选择:没有;
-webkit-text-size-adjust:没有;
-moz-text-size-adjust:没有;
-ms-text-size-adjust:没有;
-o-text-size-adjust:没有;
text-size-adjust:没有;
}
#更多
{
text-align:中心;
}
需要的话,给父元素套上位置:相对属性
最后是脚本中的初始化和获取数据:
var pagenum=1,更新=true, id=id;
var myScroll;
setTimeout(函数(){
myScroll=new IScroll(#包装,{mouseWheel:真的,点击:真});
myScroll。(scrollEnd,函数(){//console.log(这一点。y +”| | | " + this.maxScrollY);//如果滑动到底部,则加载更多数据(距离最底部10 px高度)
如果(这一点。y - this.maxScrollY)==0) {
getMore ();
}
});
},100);
函数getMore () {
var=. getelementbyid(“更多”);
pagenum + +;
. ajax({美元
url:/* * */getPage,
数据:{“当前页”:pagenum,“id”: id},
类型:“文章”,
数据类型:“json”,
成功:功能(数据){//警报(数据);
var=data.List列表;
如果列表。长度& lt;1){
pagenum——;那innerHTML="已经没有更多了……”;返回;
}
var ul=. getelementbyid (“thelist”);
(var=0;我& lt;list.length;我+ +){
var str=" & lt; li>”;
str +=& lt; div类=\“panelListItemForALL \“祝辞& lt;表类=\”allRecordTable \“祝辞& lt; tbody> & lt; tr> & lt; td> * * * & lt;/td> & lt; td>“+列表[我].OrderCode +“& lt;/td>”;
str +=" & lt;/tr> & lt; tr> & lt; td> * * * & lt;/td> & lt; td>“+列表[我].GoodsName +“& lt;/td> & lt;/tr>”;
str +=" & lt; tr> & lt; td> * * * & lt;/td> & lt; td>”+数据。DatatimeArray[我]+“& lt;/td>”;
str +=? lt;/tr> & lt;/tbody> & lt;/table> & lt;/div>”;
str +=? lt;/li>”;
ul。innerHTML +=str;
myScroll.refresh ();
}
}
});
}
之前
把相应的数据填充进去就好,当然控制器里要写一个分页获取数据的方法,通过这里的ajax获取。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
