写在前面

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

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

代码请看这里:github

移动端效果之swiper

移动端效果之picker

移动端效果之cellSwiper

移动端效果之IndexList

1 核心解析

1.1 整体思路图

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>
<!-- 这里是底部状态生成的地方 -->
</div>
</div>
</div>

这里有一点需要注意,滑动内容部分需要一个设置为overflow:scroll的容器,如果不设置,就会一直向上找,直到最后返回window,这点在下面的代码可以体现

/**
* 获取滚动容器
* @param DOM element
* @return
*/
getScrollEventTarget: function(element) {
var currentNode = element;
while (currentNode && currentNode.tagName !== 'HTML' &&
currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
var overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;
if (overflowY === 'scroll' || overflowY === 'auto') {
return currentNode;
}
currentNode = currentNode.parentNode;
}
return window;
}

1.3 滑动弹性与状态变化

这两点我们在touchmove事件中可以找到相应的代码:

// 弹性滑动
// 这里用手指滑动的位移除以比例系数来得出内容应该滑动的位移
// 因此这里的内容滑动的位移一定是会小于手指滑动的位移的,除非你将系列设置为小于1,那我就没得话说了
// 于是就造成了一种滑动又滑不动的感觉
var distance = (_this.currentY - _this.startY) / _this.config.distanceIndex; // 下移条件
// 1. 必须有刷新函数
// 2. 方向为向下
// 3. 初始的scrollTop为0
// 4. 状态不为加载中
if (typeof _this.config.topMethod === 'function' && _this.direction === 'down' &&
_this.getScrollTop(_this.scrollEventTarget) === 0 && _this.topStatus !== 'loading') {
event.preventDefault();
event.stopPropagation(); if (_this.config.maxDistance > 0) {
_this.translate = distance <= _this.config.maxDistance ? distance - _this.startScrollTop : _this.translate;
} else {
_this.translate = distance - _this.startScrollTop;
} if (_this.translate < 0) {
_this.translate = 0;
} // 这里是滑动中(touchmove)时应该判断的
// 如果滑动的位移操作了我们设置的值就置为pull
// 同时更新状态,改变内容的transform
// 同理可以在向上拉动的时候找到相应的代码,这里不作累述
_this.topStatus = _this.translate >= _this.config.topDistance ? 'drop' : 'pull'; Event.trigger('topStatus', _this.topStatus);
Event.trigger('translate', _this.translate);
} // 在向上滑动的过程中,还需要时刻检测是否已经滑倒最下面了
// 如果没有滑倒最下面,则正常滑动,否则,加载新的数据
if (_this.direction === 'up') {
_this.bottomReached = _this.bottomReached || _this.checkBottomReached();
}

1.4 加载数据

当状态在loading的时候,就是加载数据的时候,而只有当滑动停止之后,状态才需要置为loading,因此加载数据的代码需要在touchend中执行,具体看下面代码注释:

// 这里分析向下刷新数据时候的代码
// 向上部分的类似,可以自行去了解
if (_this.direction === 'down' && _this.getScrollTop(_this.scrollEventTarget) === 0 && _this.translate > 0) {
// 这里触发topDropped为true是为了给内容部分加上动画
Event.trigger('topDropped', true); // 判断当前是否已经拉倒了足够的位移,只有状态为drop的时候放手才会加载数据
if (_this.topStatus === 'drop') {
// 重置状态为loading,改变位移
Event.trigger('topStatus', 'loading');
// 向下移动50px像素是为了展示出loading的文字
Event.trigger('translate', 50); // 加载数据
_this.config.topMethod(function() {
var args = [].slice.call(arguments);
_this.onTopLoaded.apply(_this, args);
});
} else {
// 如果向下拉动状态仍为pull,说明拉动的距离很小
Event.trigger('translate', 0);
Event.trigger('topStatus', 'pull');
}
}

1.5 上拉加载数据完成之后

这里与下拉刷新有一点小小的不同,这里贴一下代码:

onBottomLoaded: function(list, isAllLoaded) {
Event.trigger('bottomStatus', 'pull');
Event.trigger('bottomDropped', false);
Event.trigger('data', list); // 这里给scrollEventTarget设置了scrollTop为50是为了防止跳动
if (this.scrollEventTarget === window) {
document.body.scrollTop += 50;
} else {
this.scrollEventTarget.scrollTop += 50;
} Event.trigger('translate', 0);
this.bottomAllLoaded = isAllLoaded;
}

1.6 关于数据初始化填充

在数据内容不足一屏时,如果设置了autoFill字段为true的话,会自动调用一遍bottomMethod来填充数据

fillContainer: function() {
var _this = this; // 如果自动填充
if (this.config.autoFill) {
// 根据滚动容器来判断当前数据是否已经填充满容器
if (this.scrollEventTarget === window) {
this.containerFilled = this.$el.getBoundingClientRect().bottom >=
document.documentElement.getBoundingClientRect().bottom;
} else {
this.containerFilled = this.$el.getBoundingClientRect().bottom >=
this.scrollEventTarget.getBoundingClientRect().bottom;
} // 如果数据没有填充满容器,则加载数据
if (!this.containerFilled) {
// 这里算是一点小遗憾,为了在自动加载loading的时候,显示出状态
// 将内容部分位移了-50px,这就是为什么在自动加载的时候会出现一个跳动的过程
Event.trigger('bottomStatus', 'loading');
Event.trigger('translate', -50);
var data = this.config.bottomMethod(function(list) {
Event.trigger('data', list);
Event.trigger('bottomStatus', 'pull');
Event.trigger('translate', 0);
});
}
}
},

2 总结

最开始会认为这样的效果实现起来会比较复杂(不过实际上确实也写了快500到600行代码了

移动端效果之LoadMore的更多相关文章

  1. 移动端效果之ScrollList

    写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑.之前手机端之前一直使用的IScroll,但是IScroll本身其实有很多兼容性BUG,想改动一下需 ...

  2. 移动端效果之Swiper

    写在前面 最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理.后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下. 代码在这里:戳我 1. ...

  3. 移动端效果之Picker

    写在前面 接着前面的移动端效果的研究,这次来看看picker选择器的实现原理 移动端效果之Swiper 代码看这里:github 1. 核心解析 1.1 基本HTML结构 <!-- 说明: 1. ...

  4. 移动端效果之CellSwiper

    写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中又是使用的React,之前使用的Reac ...

  5. 移动端效果之IndexList

    写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理.效果如下: 代码请看这里:github 移动端效果之swiper 移动端效果之picker 移动端效果之cellSwipe ...

  6. 移动端使用mint-ui loadmore实现下拉刷新上拉显示更多

    前序:在使用vue做一个h5项目的时候,需要上拉分页加载,实践中总结一下: 首先要安装mint-ui npm i mint-ui -S 然后引入,一般在main.js里面 import Vue fro ...

  7. flow-vue.js移动端效果

    得益于vue.js和element,以及vue-element-extends在线表格编辑.前后端分离的后端用golang+beego框架,服务器采用腾讯云. vue的自适应做的很好,只要将侧栏加一行 ...

  8. 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  9. 使用three.js实现机器人手臂的运动效果

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段 ...

随机推荐

  1. python 多线程和多进程的区别 mutiprocessing theading

    多线程可以共享全局变量,多进程不能.多线程中,所有子线程的进程号相同:多进程中,不同的子进程进程号不同. #!/usr/bin/python # -*- coding:utf-8 -*- import ...

  2. (转)TabIndex 属性

    html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序.   把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中.   这 ...

  3. sbt 配置文件

    配置文件名:application.conf, VM options: -Dconfig.file=application.conf 配置文件内容规范: openStrategy{ alive { a ...

  4. 我的three.js学习记录(三)

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  5. VisualStudio 扩展开发

    本文主要:如何开发一个 visual Studio 扩展,其实扩展也叫插件. 那么就是如何开发一个 vs插件. 我写这博客时候,是我在开发一个插件:编码规范工具.记录的是我从不知道到发布插件,如果遇到 ...

  6. JavaScript正则表达式实例汇总

    本文会持续更新 -------------------------------------------------------------------------------------------- ...

  7. Android插件化-RePlugin项目集成与使用

    前言:前一段时间新开源了一种全面插件化的方案-- RePlugin,之前一种都在关注 DroidPlugin 并且很早也在项目中试用了,但最终没有投入到真正的生产环节,一方面是项目中没有特别需要插件化 ...

  8. 在Javaava中stringBuilder的用法

    String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新的  ...

  9. python抽象篇:面向对象

    1.面向对象概述 面向过程编程:根据操作数据的函数或语句块来设计程序的. 函数式编程:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象编程:数据和功能结合起来,用称为对象的东西包 ...

  10. 实现基于lnmp的电子商务网站

    今天带给大家的是一个实战项目,主要是让大家了解在我们接到一个项目时,我们该怎样做好这个项目,下面看具体内容: 技术说明 LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器 ...