109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import Text from 'react-native-text';
|
||
|
|
import {StyleSheet, View, FlatList,ActivityIndicator} from 'react-native';
|
||
|
|
import Size from '../../config/size'
|
||
|
|
import { observer,inject } from 'mobx-react/native'
|
||
|
|
import ListItem from './listItem'
|
||
|
|
import { width, height } from '../../config/screen';
|
||
|
|
|
||
|
|
@inject(["menuStore"], ["userStore"])
|
||
|
|
@observer
|
||
|
|
export default class MenuFlatList extends Component{
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.store = this.props.menuStore
|
||
|
|
this.userStore = this.props.userStore
|
||
|
|
}
|
||
|
|
|
||
|
|
_renderFooter(){
|
||
|
|
if (this.store.pageNo == this.store.totalPage) {
|
||
|
|
console.log('no more')
|
||
|
|
return (
|
||
|
|
<View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
|
||
|
|
<Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
|
||
|
|
No more
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
} else if(this.store.pageNo < this.store.totalPage) {
|
||
|
|
console.log('loading')
|
||
|
|
return (
|
||
|
|
<View style={styles.footer}>
|
||
|
|
<ActivityIndicator />
|
||
|
|
<Text>Loading...</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}else{
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
_onEndReached(){
|
||
|
|
|
||
|
|
if(this.store.loading){
|
||
|
|
console.log('pull loading')
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
|
||
|
|
if((this.store.pageNo!=1) && (this.store.pageNo>=this.store.totalPage)){
|
||
|
|
console.log('last page')
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
console.log( 'pull load more ')
|
||
|
|
this.store.pageNo++;
|
||
|
|
console.log(this.store.pageNo)
|
||
|
|
this.store.menuloadmore()
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
render(){
|
||
|
|
return(
|
||
|
|
<FlatList
|
||
|
|
data = {this.props.data.data.content}
|
||
|
|
renderItem = {({item,index}) => <ListItem items = {item} index = {index}
|
||
|
|
screenWidth = {width}
|
||
|
|
menu = {this.props.menu}
|
||
|
|
/>}
|
||
|
|
//refreshing={this.store.loading}
|
||
|
|
//onRefresh = {()=>{console.log('reload'); this.store.getMenuItem(this);}}
|
||
|
|
// ListFooterComponent={this._renderFooter.bind(this)}
|
||
|
|
// onEndReached= {this._onEndReached.bind(this)}
|
||
|
|
// onEndReachedThreshold={10}//执行上啦的时候10%执行
|
||
|
|
/>
|
||
|
|
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#F5FCFF',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: 'blue',
|
||
|
|
},
|
||
|
|
footer:{
|
||
|
|
flexDirection:'row',
|
||
|
|
height:24,
|
||
|
|
justifyContent:'center',
|
||
|
|
alignItems:'center',
|
||
|
|
marginBottom:10,
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: 'black',
|
||
|
|
}
|
||
|
|
});
|