better-scroll上拉加载 import Better from 'better-scroll'
export default class index extends Component { state = { page: 1, pagesize: 10, down: '上拉加载', list: [], length: 0, } getlist() { const { page, pagesize } = this.state; return api.getList({ page, pagesize }) } async componentDidMount() { await this.getlist().then(res => { this.setState({ list: this.state.list.concat(res.data.data), length: res.data.datalength }) }) const Pull = document.querySelector('.con'); var scroll = new Better(Pull, { scrollbar: true, click: true, probeType: 3 })
scroll.on('scroll', () => {
if (-scroll.y > -scroll.maxScrollY + 10) {
this.setState({
down: '释放加载'
})
} else {
this.setState({
down: '上拉加载'
})
}
})
// 滚动结束
scroll.on('scrollEnd', () => {
if (scroll.y === scroll.maxScrollY) {
if (this.state.length === this.state.list.length) {
// console.log(this.state.list.length);
this.setState({
down: '数据加载完成'
})
return
}
if (this.state.list)
this.setState({
down: '加载中...'
})
setTimeout(() => {
this.setState({
page: this.state.page + 1
}, async () => {
await this.getlist().then(res => {
this.setState({
list: this.state.list.concat(res.data.data),
length: res.data.datalength
}, async () => {
setTimeout(() => {
scroll.refresh()
}, 50);
})
})
})
}, 1000);
}
})
}
reder(){
}
}