一个页面 ListView 列表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| renderHeader | 头部 | function | 无 |
| renderFooter | 底部 | function | 无 |
| renderRow | 渲染单行的方法 | function | 无 |
| dataSource | 数据源 | array | 无 |
| onEndReached | 加载到底部时触发 的事件 | 原onloadmore 事件 | 无 |
| onEndReachedThreshold | 加载更多的位移设置量 | string | 500rem |
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,Image,TouchableHighlight} from 'nuke-components';
import {mount} from 'nuke-mounter';
import {Button,Input,Icon,ListView} from 'nuke';
let listData = [];
for (var i = 0; i < 30; i++) {
listData.push({key: i,pic:'//img.alicdn.com/bao/uploaded/i1/TB1gdT4KVXXXXcpXFXXwu0bFXXX.png',text:'近三个月订单'});
}
const app = {
'listHeader':{
height:'300rem',
display:'flex',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
},
'listHeaderText':{
fontSize: '60rem',
color:'#333333',
},
'listHeaderSub':{
fontSize: '30rem',
color:'#888888',
},
'listContainer':{
flex: 1,
backgroundColor:'#f8f8f8',
},
'footer':{
paddingTop: '50rem',
paddingBottom: '50rem',
backgroundColor: '#efefef',
textAlign: 'center',
},
'link':{
fontSize: '32rem',
},
'titleLink':{
backgroundColor: '#ff4200',
display: 'block',
padding: '10rem',
},
'img':{
width: '100rem',
height: '100rem',
backgroundColor: '#ff4200',
},
'cellItemIndex':{
backgroundColor:'#ffffff',
height: '130rem',
display:'flex',
paddingLeft:'20px',
alignItems: 'center',
flexDirection:'row',
},
'cellItemList':{
backgroundColor:'#ffffff',
height:'110rem',
borderBottom:'1px solid #e8e8e8',
display:'flex',
alignItems:' center',
flexDirection:'row',
},
'itemTextList':{
flex:13,
fontSize:'30rem',
color:'#333333',
},
itemIcon:{
width:'60rem',
height:'60rem',
flex: 2,
justifyContent:'center',
},
cellTextView:{
flex:13,
display:'flex'
},
itemMainTitle:{
fontSize:'34rem',
color:'#333333',
marginBottom:'10px',
},
itemSubTitle:{
fontSize:'24rem',
color:'#333333',
},
itemArrow:{
flex: 1,
width:'18px',
height:'18px',
}
}
class ListViewDemo extends Component {
constructor() {
super();
this.state = {
data: listData,
stop: false
};
this.index = 0;
}
handleLoadMore() {
var self = this;
// 这里进行异步操作
setTimeout(function() {
self.index++;
if (self.index == 5) {
self.state.stop = true; // 加载5次后会停止加载，并去掉菊花
}
self.state.data.push({key: 'x',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'},{key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'});
self.setState(self.state);
}, 1000);
}
linkTo(item,e) {
console.log(e);
}
renderItem (item, index){
return <TouchableHighlight style={app.cellItemList} onPress={this.linkTo.bind(this,item)}>
<Icon src={item.pic} style={app.itemIcon} />
<Text style={app.itemTextList}>{item.text}</Text>
<Icon style={app.itemArrow} src="//img.alicdn.com/tfs/TB1EU2rMVXXXXcpXXXXXXXXXXXX-64-64.png" />
</TouchableHighlight>;
}
renderHeader(){
return <View style={app.listHeader}><Text style={app.showTitleText}>list</Text></View>
}
renderFooter(){
return <View style={app.loading}><Text style={app.loadingText}>加载中...</Text></View>
}
render(){
var self=this;
return (
<ListView
renderHeader={this.renderHeader.bind(self)}
renderFooter={this.renderFooter.bind(self)}
renderRow={self.renderItem.bind(self)}
dataSource={self.state.data}
style={app.listContainer}
onEndReached={self.handleLoadMore.bind(self)}
/>
)
}
}
mount(<ListViewDemo />, mountNode);
