封装antd ListView 的组件
父组件只使用
// listData 数据 loadlist // 请求数据的接口 total // 总条数 // padTop 上内边距 // padBottom 下内边距
<Lists listData={listData} loadlist={e=>this.loadlist(e)} total={'41'} padTop={45} padBottom={80}></Lists>
封装的组件
import React from 'react';
import { ListView } from 'antd-mobile';
import ReactDOM from 'react-dom';
import './index.styl'
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,
}
}
// 判断值有没有出现滚动条
init(){
let scrollHeight = ReactDOM.findDOMNode(this.lv).scrollHeight
let offsetHeight = ReactDOM.findDOMNode(this.lv).offsetHeight
if(offsetHeight >= scrollHeight){
this.props.loadlist();
}
}
onEndReached(){
let {listData,total} = this.props;
if(listData.length < total){
this.props.loadlist();
}
}
// 这个函数就是我要进行各种操作的函数
loadList(){
let {listData,total} = this.props;
if(listData.length < Number(total)){
setTimeout(()=>{
this.init()
},500)
}
return listData;
}
render(){
const row = (rowData, sectionID, rowID) => {};
let arr = this.loadList();
let {listData,total,padTop,padBottom} = this.props;
return (
<div id="header" style={{paddingTop: padTop+'px'}}>
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderRow={row}
style={{
height: `calc(100vh - ${padTop+padBottom}px)`,
overflow: 'auto',
}}
onEndReached={e=>this.onEndReached(e)}
onEndReachedThreshold={40}
>
{
arr.map((item,index)=>{
return (
<div className="content" key={index}> {index} </div>
)
})
}
{
listData.length < total ? (
<div className="loading"> 加载中。。。 </div>
):(
<div className="loaded"> 加载完成 </div>
)
}
</ListView>
</div>
)
}
}
export default Lists;
index.styl css文件
.header{
width: 100vw;
height: 50px;
background: skyblue;
text-align:center;
line-height: 50px;
}
.content{
width:100vw;
height:40px;
background: skyblue;
color:#fff;
text-align:center;
line-height: 40px;
}
.loading{
width:100%;
height: 40px;
text-align: center;
line-height: 40px;
background: skyblue;
color:#fff;
}
.loaded{
width:100%;
height: 40px;
text-align: center;
line-height: 40px;
background: skyblue;
color:#fff;
}
