Cell
- category: Components
- chinese: 列表项
- type: 基本
何时使用
我们通常使用 ListView
组件渲染一个长列表,Cell
是指其中的列表项。
本质上,Cell
是一个容器节点,与 View
不同的是,Cell
只能作为 ListView
的子组件使用。
// 以下展示 2 种使用方式// ListView 的 dataSource 用法,每一个 renderItem 渲染出的节点,会被自动包裹 `Cell` ,开发者无需再自行添加。<ListView renderRow=thisrenderItem dataSource=thisstatedata /> // ListView 自己渲染 Cell 的用法 , 需给 ListView 添加 _autoWrapCell={false} 。<ListView _autoWrapCell=false style=styleslistContainer> thisstatedata</ListView>
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
append | 渲染模式,可选 tree node |
String | tree |
keepScrollPosition | 当 ListView 的数据变化,需要在头部 append 时,是否保持当前 cell 的滚动位置,仅 Native 有效 | boolean | false |
key | 每个Cell 都必须要有 key,便于 ListView 复用 | String |
demo 参考
扫码预览(手淘、千牛、天猫等)
使用方法
- 安装
// 切换到你的 rax 项目中tnpm i nuke-cell --save// 参考如下 demo 您可能还需要安装// tnpm i nuke-view nuke-text nuke-list-view --save
- 调用示例
/** @jsx createElement */;;;;; { super; thisstate = data: "列表1""列表2""列表3""列表4""列表5""列表6""列表7" ; } { return <ListView _autoWrapCell=false showScrollbar=false style=styleslistContainer> thisstatedata </ListView> }const styles = listContainer : flex : 1 cellItem : width: '750rem' height: '200rem' paddingTop:'20rem' flexDirection:'row' borderBottomWidth:'1rem' borderBottomStyle:'solid' borderBottomColor:'#cccccc' justifyContent:'center' alignItems:'center' text: color:'#666666' ;
其他
- bug、建议联系 @翊晨
- 钉钉交流群