[英]Position: sticky - scroll bouncing when combined with javascript height adjustment
[英]Scroll height adjustment with infinity scroll
在“滚动”位于最底部的那一刻,调用函数getUsers ()
。 如何设置滚动使其不会到达滑块的末尾,并调用getUsers ()
函数。 会有无限滚动效果。 我的意思是像这里的滚动效果: https : //codesandbox.io/s/ww7npwxokk 。 当滚动到达底部时,它返回。
代码在这里: https : //stackblitz.com/edit/react-nq8btq
import './style.css';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state = {
users: [],
page: 1
};
}
componentDidMount() {
this.getUsers();
}
getUsers = () => {
axios({
url: `https://jsonplaceholder.typicode.com/users`,
method: "GET"
})
.then(res => {
this.setState({
users: res.data
});
})
.catch(error => {
console.log(error);
})
}
scroll = (e) => {
const page = this.state.page;
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
if (bottom) {
alert('bottom');
this.getUsers()
this.setState({
page: this.state.page + 1
})
}
const top = e.target.scrollTop;
if(top === 0 && page > 1) {
alert('I AM AT THE TOP');
this.setState({
page: this.state.page - 1
})
}
}
render() {
console.log(this.state.page)
console.log(this.state.users)
return (
<div>
<div onScroll={this.scroll} className="container">
<ul>
{this.state.users.map((user, index) =>
<li>
{user.name}
</li>
)}
</ul>
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
在这里,我更新了您的代码,稍微简化了一些,但主要是您的代码注释了关键点。
class App extends Component {
state = {
users: [],
page: 1
};
componentDidMount() {
this.getUsers();
}
getUsers = () => {
axios({
url: `https://jsonplaceholder.typicode.com/users`,
method: "GET"
})
.then(res => {
this.setState({
// *you must append to users in state, otherwise
// the list will not grow as the user scrolls
users: [...this.state.users, ...res.data],
page: this.state.page + 1
});
})
.catch(error => {
console.log(error);
})
}
scroll = (e) => {
// *simplified, to only handle appending to the list
// note the 50px from the bottom, adjust as required
// so that the request is made before the users reaches
// the bottom of the page under normal scrolling conditions.
if (e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50) {
this.getUsers();
}
}
render() {
return (
<div onScroll={this.scroll} className="container">
<ul>
{this.state.users.map((user, index) =>
// *always add a unique key for each item
<li key={user.name}>
{user.name}
</li>
)}
</ul>
</div>
);
}
}
您需要做的就是决定何时调用 get 用户。
即,如果您希望在已经滚动到高度的 70% 时调用它,那么该系数将为 0.3 (30%)
每当滚动超过 70% 标记时,就会调用this.getusers()
。
看看我是如何修改你写的相同条件的。
其余代码保持不变
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state = {
users: [],
page: 1
};
}
componentDidMount() {
this.getUsers();
}
getUsers = () => {
axios({
url: `https://jsonplaceholder.typicode.com/users`,
method: "GET"
})
.then(res => {
this.setState({
users: res.data
});
})
.catch(error => {
console.log(error);
})
}
scroll = (e) => {
const page = this.state.page;
const bottom = e.target.scrollHeight - e.target.scrollTop < e.target.clientHeight-0.3*e.target.clientHeight;
if (bottom) {
alert('bottom');
this.getUsers()
this.setState({
page: this.state.page + 1
})
}
const top = e.target.scrollTop;
if(top === 0 && page > 1) {
alert('I AM AT THE TOP');
this.setState({
page: this.state.page - 1
})
}
}
render() {
console.log(this.state.page)
console.log(this.state.users)
return (
<div>
<div onScroll={this.scroll} className="container">
<ul>
{this.state.users.map((user, index) =>
<li>
{user.name}
</li>
)}
</ul>
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
这个库应该为你做的伎俩
$ yarn add react-infinite-scroller
实施起来非常简单
<InfiniteScroll
pageStart={0}
loadMore={this.getUsers()}
hasMore={this.state.hasMoreUsers}
loader={<div key={0}>loading ...</div>}
>
<li>
{user.name}
</li>
</InfiniteScroll>
不要忘记在组件文件中导入 lib
import InfiniteScroll from 'react-infinite-scroller';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.