移动端开发，如何在一个div内滑动时，加载其他数据？

Question

如何在这个div内滑动时，把文字和图片替换？

Answer 1

根据你的描述，我理解的交互过程是这样的：

1. 监听手势动作（手指上滑）；
2. 发送 Ajax 请求；
3. 收到返回数据后替换相应节点的内容。

实现思路：

1. 监听移动端手势可以用 Hammer.js ，监听上滑手势（在 Hammer 里面叫panup）。 这里是一个简单的 Demo。
2. 监听到上滑手势后，发送 Ajax 请求。
3. 得到返回数据后，刷新相关 DOM 节点。在你的场景里，就是替换掉图片的 src 以及文字节点的 innerHTML。

实现这个效果并不困难，但是容易忽视的一点是：函数节流。特别是在网络不佳的时候，手指滑完了之后页面并不能实时刷新，这时候用户可能会反复尝试滑滑滑，导致上面的三个步骤重复好多次，既浪费了流量，又增加了你服务器的负担，还可能造成页面卡顿。

Answer 2

不知道具体效果。是一次滚动固定距离？还是跟滚动条一样？