iScroll 实例：下拉刷新，滚动翻页

最新推荐文章于 2024-08-08 07:50:07 发布

XXmaoxiaoXX

最新推荐文章于 2024-08-08 07:50:07 发布

阅读量2k

点赞数

分类专栏： iScroll 文章标签： iScroll 实例：下拉刷新，滚动翻页

本文链接：https://blog.csdn.net/kiwangruikyo/article/details/79646085

版权

本文介绍了如何使用iScroll实现下拉刷新和滚动翻页功能，包括设置最优的HTML结构，注意事项，以及iScroll的初始化参数和方法API。讲解了topOffset参数用于下拉刷新，onScrollMove和onScrollEnd事件处理加载新数据。同时，还探讨了iScroll的缩放功能和捕捉元素的应用，提供了自定义滚动条样式的方案。

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

iScroll基本信息

1.最优的使用iScroll的结构如下所示：
<div id="wrapper"> <ul> <li></li> ..... </ul> </div>
这个例子中，ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
简单例子：

<div id="wrapper">  
        <ul>  
            <li>11111</li>  
            <li>22222</li>  
            <li>33333</li>  
            <li>44444</li>  
            <li>55555</li>  
            <li>66666</li>  
            <li>77777</li>  
            <li>88888</li>  
            <li>99999</li>  
        </ul>  
</div>

运行结果：
这里写图片描述
2.注意事项
只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，可以使用下面代码：

<div id="wrapper">
        <div id="scroller">
            <ul>
                <li></li>
                ...
            </ul>
            <ul>
                <li></li>
                ...
            </ul>
        </div>
    </div>

简单例子