移动端效果之ScrollList

最新推荐文章于 2024-06-22 17:30:22 发布

萌萌的卡洛奇

最新推荐文章于 2024-06-22 17:30:22 发布

阅读量3.8k

点赞数

分类专栏： javascript 移动开发文章标签：移动开发 scrollview下拉刷新 iscroll5

本文链接：https://blog.csdn.net/yuzhongzi81/article/details/78579719

版权

本文介绍了移动端ScrollList的实现原理，包括整体思路、HTML结构、滑动弹性与状态变化、加载数据、上拉加载的处理，以及数据初始化填充。通过阅读饿了么组件库并实践，总结了近600行代码的实现过程。

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

写在前面

列表一直是展示数据的一个重要方式，在手机端的列表展示又和PC端展示不同，毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll，但是IScroll本身其实有很多兼容性BUG，想改动一下需求也很不容易，可以看我之前写的这一文章IScroll那些事——内容不足时下拉刷新（这里并不是说IScroll不好，里面对手机、浏览器兼容性都做了大量的处理，只是当遇到bug时或者想改一下需求时不时特别方便，毕竟是一个这么大的库）。因此也一直想了解一下这类列表的实现原理，万一真到时候可以自己写一个，这样自己维护自己的代码也可以更加得心应手。

下面主要是阅读了饿了么UI组件库mint-ui然后编写出来的效果图：

LoadMore

代码请看这里：github

1 核心解析

1.1 整体思路图

silu

1.2 HTML结构

<div class="page-loadmore-wrapper">
    <div id='loadMore' class="loadmore">
        <div id="loadMoreContent" class="loadmore-content">
            <!-- 这里是顶部状态生成的地方 -->
            <ul class="page-loadmore-list" id="loadMoreList"></ul>
            <!-- 这里是底部状态生成的地方 -->