React 基于IScroll 5 的 下拉刷新上拉加载组件

React组件

下拉刷新上拉加载更多、PC端移动端支持

npm install --save iscroll npm install --save iscroll-luo 2. 完整例子

import React from 'react'; import Luo from 'iscroll-luo'; class Test extends React.Component { constructor(props) { super(props); this.state = {   data: [1, 2, 3] }; }  /** 下拉刷新 **/  onDown() { this.setState({ data: [1, 2, 3] }); /** 注意此处，就算没有数据或接口调用失败等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/ }  /** 上拉加载更多 **/ onUp() { this.setState({ data: [...this.state.data, 4, 5, 6] }); /** 注意此处，就算没有更多数据了或接口调用失败等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/ } render() { return ( {/** 务必用一个具有高度的容器包裹iscroll-luo组件 **/} <div style={{ position: 'relative', height: '100vh' }}> <Luo id='id' onDown={() => this.onDown()} onUp={() => this.onUp()} > { this.state.data.map((v, i) => <div key={i}>{v}</div>) } </Luo> </div> ); } } 3. 参数

id # 必填 string 一个唯一的ID （在一个页面有多个Luo控件时比较重要） onDown # 可选 func 触发下拉刷新时的回调函数 onUp # 可选 func 触发上拉加载时的回调函数 noDown # 可选 bool 是否关闭下拉刷新 默认false noUp # 可选 bool 是否关闭上拉加载 默认false noDownStr # 可选 string 关闭下拉刷新后，下拉区域显示的文字 默认无 noUpStr # 可选 string 关闭上拉加载后，上拉区域显示的文字 默认无 className # 可选 string 额外的class,会添加到iscroll-luo组件的包裹元素上 detectionHeight # 可选 bool 是否自动检测容器高度变化 默认false iscrollOptions: { # 可选 object iscroll的原生参数，初始化时会作为iscroll的options probeType: 3, # 不要动此参数，必须设为3 preventDefault: true, # 默认禁止浏览器默认事件 click: true, # 默认开启了原生点击事件 } options: { # 可选 object 自定义参数 backgroundColor: '#f5f5f5', # 背景颜色，是滑动底层的背景颜色 fontColor: '#888888', # 文字颜色，是下拉刷新、上拉加载那些文字的颜色 beyondHeight: 30, # 超过此长度后触发下拉或上拉,单位px pulldownInfo: '下拉刷新', # 下拉刷新的文字 pulldownReadyInfo: '松开刷新', # 触发下拉刷新的文字 pulldowningInfo: '刷新中…', # 正在刷新中的文字 pullupInfo: '加载更多', # 上拉加载的文字 pullupReadyInfo: '松开加载', # 触发上拉加载的文字 pullupingInfo: '加载中…', # 正在加载中的文字 } 4. 在PC端使用

请把preventDefault设置为false:

<Luo iscrollOptions={{ preventDefault: false }} >...</Luo> 5. 特性 传入iscroll-luo中的数据改变时，即this.props.children改变时，
iscroll-luo认为已经成功刷新或成功加载更多了，iscroll-luo会刷新内部状态 参数detectionHeight，设为true后，iscroll-luo会不停的检测容器的高度是否变化，
如果变化了，则自动调用iscroll的refresh()方法
一般不需要开这个，除非有手动改变高度的需求。window的大小改变、手机的横屏竖屏切换，会自动刷新 this.props.children、this.props.noDown(关闭下拉)、this.props.noUp（关闭上拉） 这几个属性的值被改变时，都会刷新Luo内部的状态 6. 演示案例

https://isluo.com/work/iscroll-luo/index.html

iscroll Github： https://github.com/cubiq/iscroll
iscroll中文API文档： http://www.cnblogs.com/leolai/articles/4204345.html