|
class List extends React.Component {
constructor (props) {
super(props);
this.state = {
listData: []
};
this.page = 0;
this.mySwiper = null;
};
componentWillMount (nextProps, nextState) {
this.getListData();
console.log(1)
};
componentDidMount() {
console.log(2)
this.mySwiper = new Swiper('.star-list', {
direction: 'vertical',
slidesPerView : 6,
centeredSlides : false,
on: {
click: function(a, b, c){
alert(a, b, c)
}
}
});
};
componentDidUpdate(prevProps, prevState) {
this.mySwiper.updateSlidesSize();
};
render () {
return (
<div className="star-list">
<div className="swiper-wrapper">
{
this.state.listData.map((item, index, array) => {
return (
<div className="swiper-slide" key={index}>{item.name}</div>
);
})
}
</div>
</div>
);
};
getListData () {
let isWating = this.getListData.waiting;
if (isWating){
console.log('正在加载');
return;
};
isWating = true;
let test = [];
for (let i=0; i<20; i++){
let json = {};
json.name = this.page * 20 + i;
test.push(json);
};
setTimeout(() => {
this.setState({
listData: this.state.listData.concat(test)
});
isWating = false;
this.page += 1;
},500);
};
};
|
|