Open chenbin92 opened 8 years ago
用于展示垂直滚动的变化的数据列表
1. 可以指定首次初始化渲染的条数 2. 可以指定每次事件循环渲染的条数 3. 支持下拉刷新(不支持上拉刷新)
1. initialListSize: 初始化渲染的条数,一般大于首屏条数 2. pageSize:每次渲染的条数 3. renderScrollComponent: 返回的组件用来渲染list rows 4. scrollRenderAheadDistance: 顶部屏幕之外的数据离屏幕头部多远时开始渲染数据 5. onEndReachedThreshold: 距离底部多少时出发`onEndReached` 6. dataSource:接受的数据源,`ListViewDataSource`的实例对象,***必须*** 7. renderSeparator:每行之间的分割线,函数类型 8. renderRow:每行的渲染函数 9. renderFooter:尾部渲染函数 10. renderHeader:头部渲染函数 11. renderSectionHeader:分组头的渲染函数 12. onChangeVisibleRows:可视化区域变化时出发,屏幕旋转时会调用 13. removeClippedSubviews: 实验性质的属性,提高滚动时到性能,和row的样式‘overflow:hidden’一起使用
通过引用当前listview的实例对象可以调用的方法
1. getMetrics:返回一些常态数据 2. getScrollResponder:返回事件相应器对象 3. setNativeProps:动态设置样式
var dataSource = new ListView.DataSource({ // doSomething })
var dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 })
rowHaschanged(): 初始化状态,用于判断状态是否改变,如果 state 改变就重新渲染数据,否则无变化
state
render: function() { return ( <ListView dataSource={this.state.dataSource} /> ) }
render: function() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData)=> <Text>{rowData}</Text>} /> ) }
renderRow(): 接受数组中的每个数据作为参数,返回一个可渲染的组件,作为listview的每一行
var ListViewExample = React.createClass({ // 这里返回一个对象,设置组件的初始化状态, getInitialState: function() { var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 // 用于判断当前数据变化的标准 }); return { dataSource: ds.cloneWithRows(this._genRows()), }; }, // 生成数据 _genRows: function() { var dataArray = []; for(var i=1;i<15;i++) { dataArray.push("row" + i) } return dataArray; }, render: function() { return ( <ListView dataSource={this.state.dataSource} // 数据源 renderRow={(rowData) => <Text style={styles.rowText}>{rowData}</Text>} /> // 接受数组中的每个数据作为参数, 作为listview的每一行(for循环) ); } }); var styles = StyleSheet.create({ rowText: { padding: 18, borderWidth: 1, borderColor: '#eee' }, });
使用 ListView 组件提供的 renderSectionHeader() 方法,我们可以实现一个类似 iPhone 通讯录的滑动效果,如果设置了该方法,会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候,处于对应的内容的顶部;直到下一个section的header滑动到顶部时,会被替换成当前section的header,以此循环,即是我们常见的类似 iphone 通讯录的滑动效果
ListView
renderSectionHeader()
So good! Add func..
正在寻找ionic实现第二种iPhone通讯录滑动的效果,哪位大神知道啊?
@dujuanxian ionic 的实现思路就是传统的web 实现思路:写好 HTML + CSS 结构,然后根据 Section Header 到顶部的距离来计算是否粘贴固定在顶部还是滑动
ionic
refs: https://github.com/ccoenraets/directory-ionic-nodejs
Android 机上如何实现这种效果
ListView 组件的使用
使用场景
用于展示垂直滚动的变化的数据列表
特点
属性
方法
通过引用当前listview的实例对象可以调用的方法
基本使用
1. 创建一个 ListView.DataSource 数据源
2. 然后给它传递一个普通的数据数组
rowHaschanged(): 初始化状态,用于判断状态是否改变,如果
state
改变就重新渲染数据,否则无变化3. 再使用数据源来实例化一个ListView组件
4. 定义它的renderRow回调函数,这个函数会接受数组中的每个数据作为参数,返回一个可渲染的组件(作为listview的每一行)
renderRow(): 接受数组中的每个数据作为参数,返回一个可渲染的组件,作为listview的每一行
示例一:
示例二:类似 iPhone 通讯录的滑动效果
使用
ListView
组件提供的renderSectionHeader()
方法,我们可以实现一个类似 iPhone 通讯录的滑动效果,如果设置了该方法,会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候,处于对应的内容的顶部;直到下一个section的header滑动到顶部时,会被替换成当前section的header,以此循环,即是我们常见的类似 iphone 通讯录的滑动效果具体实现代码
效果图
参考文档