hcysunyang/scroll-flip-page

🎁A super easy to use infinite scroll component.(Vue component)

scroll-flip-page

A super easy to use infinite scroll component.(Vue component)

Intro

scroll-flip-page 是一个 Vue 组件，它让你轻松的就能够实现无限滚动加载(翻页)的功能，而不需要考虑更多。

Installation

该组件封装自开源框架 finger-mover 的 simulation-scroll-y 插件，故你需要安装之：

npm install --save finger-mover simulation-scroll-y scroll-flip-page

Why?

在做移动设备上的应用时，我们经常会开发无限滚动加载更多、下拉刷新的功能，也就是移动端的翻页，那么下面我们就看看实现这样一个功能你需要考虑什么：

假设起始页码是 1，每页数据 20 条：

• 一、加载第一页数据

加载第一页数据的时候分三种情况，①：一条数据都没有；②：数据少于 20 条，即不足一页；③、数据满足一页

• 二、第一页数据加载完之后，向上滑动加载更多数据

第一页数据加载完成后，根据三种不同的情况，向上滑动加载更多的行为也不同：

④：对于 ①，由于一条数据都没有，此时可能会展示无数据页面，所以不存在加载更多的情况

⑤：对于 ②，有数据，但不足一页，此时用户可以向上滑动加载更多，那么问题来了，加载更多的时候应该加载第一页数据还是第二页数据？你可能会觉得第一页数据已经不足一页了，还有必要让用户上滑加载更多吗？有肯定是有，不过你也可以选择不再加载更多数据，但是更好的行为是仍然加载第一页数据，而不是第二页，因为虽然目前第一页数据不足，但你并不能保证下一秒钟第一页数据还不足，很可能在你打个喷嚏的时候，数据库中的数据就多了几十条。所以此时页码不能 +1。

⑥：对于 ③，数据满足一页，那么理所当然的页码要 +1，继续请求第二页数据

• 三、加载第二页数据

⑦：假设我们来到了情况 ⑥，此时第一页数据满足一页，我们需要页码 +1 请求第二页数据，第二页数据的请求结果同样有三种情况：⑧：一条数据都没有；⑨：数据少于 20 条，即不足一页；⑩、数据满足一页

• 四、第二页数据加载完之后，向上滑动加载更多数据

对于 ⑧：此时第二页数据为空，所以页码要 -1，以允许下次继续请求该页数据。

对于 ⑨：此时第二页有数据，但是不足一页，那么此时与情况 ⑤ 类似，即下一次加载更多的时候仍然请求第二页数据，所以此时页码要 -1，以保证下一次仍然请求第二页数据并替换之前的第二页数据(不替换掉岂不是会有重复数据)

对于 ⑩：此时第二页数据满足一页，这时什么都不用做了，下一次加载更多时候页码 +1 请求第三页数据。

• 五、下拉刷新需要重置页码

除了以上四点需要考虑，下拉刷新的时候，你需要把页码重置为起始页码。

• 六、更新滚动区域

无论是下拉刷新还是加载更多，亦或是其他导致列表数据变化，你都调用滚动插件的重新计算滚动尺寸的方法。

Features

• scroll-flip-page 的第一点特性就是上面提到的所有内容，你都不需要考虑，因为这些复杂的事情 scroll-flip-page 都帮你做好了。
• 由于 scroll-flip-page 组件封装自开源框架 finger-mover 的 simulation-scroll-y 插件。所以该插件拥有的好特性 scroll-flip-page 将全部继承，具体请查看 simulation-scroll-y 与现有解决方案的对比

Demo

该项目提供一个获取 Vue 项目 contributors 列表的 Demo：

如何运行该 Demo？使用简单强大的 poi，也强烈推荐你说用。

git clone 该项目
npm install -g poi
npm run dev

即将会有一个针对该 Demo 的教程，敬请期待...

Usage

import ScrollFlipPage from 'scroll-flip-page'

// register globally
Vue.component(ScrollFlipPage)

// or locally
export default {
  components: {
    ScrollFlipPage
  }
}

v-model

使用 v-model 绑定列表数据：

<scroll-flip-page v-model="dataList">
  <div v-for="item of dataList">{{item.name}}</div>
</scroll-flip-page>

Props

name	type	required	default	description
scroll-bar	Boolean	NO	true	是否显示滚动条
unidirectional	Boolean	NO	false	是否单向滑动，详情查看unidirectional
bounce	Boolean	NO	true	是否开启边界弹性
pullDown	Object	NO	查看pullDown	下拉刷新配置
loadMore	Object	NO	查看loadMore	无限滚动配置
fetch	Function	YES	无	scroll-flip-page 将使用该函数获取数据，该函数需要返回一个 Promise
dataField	String	YES	无	告诉 scroll-flip-page 使用数据的哪一个字段作为列表数据
check	Function	YES	无	scroll-flip-page 用来判断获取数据是否成功
initial	Boolean	NO	true	是否初始化渲染数据
pageSize	Number	NO	20	每页数据尺寸，scroll-flip-page 将用它来判断数据是否满足一页
startPage	Number	NO	0	第一页的页码，默认从 0 开始
interceptor	Function	NO	无	用来预处理数据，在列表数据真正被赋值到通过 v-model 绑定的字段之前被调用，该函数必须返回处理后的列表数据，并且该数据将会被赋值给通过 v-model 绑定的字段

Slots

name	description
pulldown	下拉动作(如下拉刷新)自定义的DOM内容插槽
loadmore	无限滚动自定义DOM内容插槽

<scroll-flip-page
  v-model="contributors"
  :fetch="fetchData"
  data-field="body"
  :start-page="1"
  :check="res => res.ok"
>
  <!-- DOM for pulling down the refresh -->
  <div :class="$style.pullDownDom" slot="pulldown">下拉刷新</div>

  
  <!-- For infinite scrolling of DOM -->
  <div :class="$style.loadMoreDom" slot="loadmore" slot-scope="{ isNoData }">
    <span v-show="isNoData">没有更多数据</span>
    <span v-else>加载中...</span>
  </div>
</scroll-flip-page>

scroll-flip-page 组件并没有提供内置的 pulldown 和 loadmore DOM结构以及布局，原因是一直以来大家在开发这块相关的内容时，基本都会有自己自定义的下拉刷新和无限滚动的样式。

比如有的产品要求下拉刷新的DOM结构要跟随可滚动元素一起动，有的产品则设计为下拉刷新DOM隐藏在可滚动元素后面，当拖动下拉时会展示下拉刷新DOM，而不是与可滚动元素一起滚动，出于此，组件的**是：你可以完全自定义你想要的刷新DOM的模式以及样式。

如果你需要一些思路可以查看：pulldown 的示例部分 以及 loadmore 的示例部分

Events

运动相关事件

name	description	parameters
on-touchstart	touchstart 事件	(isMotion)：当 touchstart 事件触发时，元素是否在滚动
on-touchmove	touchmove 事件	(currentY)：滚动元素当前的位置
on-touchend	touchend 事件	(isMotion)：当 touchend 事件触发时，元素是否在滚动
on-transmove	元素惯性滚动时持续触发	(currentY)：滚动元素当前的位置
on-transmove-end	元素滚性滚动结束时触发	(currentY)：滚动元素当前的位置
on-motion-stop	元素运动停止时触发(on-transmove-end 是 on-motion-stop 的子集)	(currentY)：当滚动元素运动停止时触发

业务逻辑相关事件

name	description	parameters
on-nothing	当页码为起始页码且没有数据时触发，即：第一页就没有数据	无
on-having	无论何时，只要请求有数据返回就会触发	无
on-backend-error	当 check props 检验为假时触发	(res)：请求返回的数据对象
on-network-error	网络出错时触发，比如无网状态等，注意：不排除是代码报错引起的原因所引起	(err)：捕获到的错误信息
on-pull-refresh	达到下拉刷新临界点后触发 pullDown: { onActive: function () {} } 的封装	无
on-load-more	达到加载更多临界点后触发 loadMore: { onLoadMore: function () {} } 的封装	无

Methods

通过给 <scroll-flip-page></scroll-flip-page> 组件定义 ref 属性：

<scroll-flip-page ref="sfp"></scroll-flip-page>

可以在父组件中方法该组件，从而调用组件的方法：

mounted () {
  const sfp = this.$refs.sfp
  sfp.fetchData() // 如果 initial Props 设置为 false，那么可以通过该方法手动获取数据
  sfp.scrollTo(-300, 1000) // 手动滚动元素
}

可调用的组件方法以及方法的调用方式请参考：simulation-scroll-y 的实例方法

License

MIT

Copyright (c) 2017, HcySunYang

scroll-flip-page's Issues

为什么不加上一个横向滚动的组件呢？

或者能分享一下怎么将这个simulation-scroll-y组件封装成Vue的component的吗？

window is not defined

全局引入

window is not defined

npm是真的挂了

npm是真的挂了

npm 挂了

npm中找不到scroll-flip-page

感谢加提问

首先,非常感谢前辈的vue源码以及手写监听的博客，跟着前辈的博客我学到了很多，也自己动手敲了很多，再次感谢前辈对我前端道路起到了积极向上的作用！
万分感谢！
其次，提个关于美团外卖的bug(有可能是微信的bug)，我ios用美团外卖点了外卖后，到微信里发红包，我没有点开，只是按住不放，然后松开，也没有进入领取红包页面，然后转发给朋友，朋友说我领过了，我没有点进去领啊，why?
如果是美团的望引起重视，如果是微信的我去找微信相关开发人员，这是个bug啊，不懂IT得用户肯定会喷的。
最后，祝愿美团发展越来越好，当然，红包多给点，毕竟我是码农，不算程序员(以工资来划分的话。。。)，吃饭很贵的。

请问，列表内容过多，是否会装满内存变卡呢

无限滚动的列表，内容很多，大概几千条，用户看了很多会不会内存变卡呢

下拉刷新加载完成之后只能再用一次，用第二次的时候就会报错