// ReactDOM 是關鍵
import React from 'react';
import { ListView } from 'antd-mobile';
import ReactDOM from 'react-dom';
class Lists extends React.Component{
constructor(props){
super(props)
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});
this.state = {
dataSource,
arr: [0]
}
}
componentDidMount(){
this.init();
}
// 初始渲染 這個代碼是為了讓listView組件出現滾動條
init(){
let scrollHeight = ReactDOM.findDOMNode(this.lv).scrollHeight
let offsetHeight = ReactDOM.findDOMNode(this.lv).offsetHeight
let fn = (a) => {
console.log(a)
if(offsetHeight >= a){
this.setState({
arr: this.state.arr.concat([1])
},()=>{
setTimeout(()=>{
fn(ReactDOM.findDOMNode(this.lv).scrollHeight);
},1000)
})
}
}
fn(scrollHeight);
}
onEndReached(){
this.setState({
arr: this.state.arr.concat([1])
})
}
render(){
const row = (rowData, sectionID, rowID) => {};
return (
<div id="header">
<div className="header"> 這是頭部 </div>
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderRow={row}
style={{
height: 'calc(100vh - 50px)',
overflow: 'auto',
}}
onEndReached={e=>this.onEndReached(e)}
onEndReachedThreshold={40}
>
{
this.state.arr.map((item,index)=>{
return (
<div className="content" key={index}> {item} 內容部分 </div>
)
})
}
</ListView>
</div>
)
}
}
export default Lists;