iscroll.js--滚动加载实例

最新推荐文章于 2024-10-07 19:43:01 发布

SirM2z

最新推荐文章于 2024-10-07 19:43:01 发布

阅读量5.7k

点赞数

分类专栏： Javascript ajax 文章标签： javascript 学习 iscroll 实例分页

本文链接：https://blog.csdn.net/SirM2z/article/details/47273071

版权

Javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

本文介绍了iscroll.js在滚动加载中的应用，通过html结构、css样式和脚本初始化，展示了一个简单的分页实现过程，旨在帮助学习者理解如何利用iscroll.js实现高效且优雅的滚动加载效果。

摘要由CSDN通过智能技术生成

滚动加载是个好东西，可以解决一次加载过多的尴尬，其实就是变相的分页，总结下这个轮子的用法，挺简单的。

首先是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获取。

简单逼格高~