I follow the demo to add Infinite Scroll, the console showed ‘fetchMemoCommentsMore’ twice when I scroll to the bottom. Thanks…
import React from 'react';
import {
Page,
Navbar,
NavTitle,
Link,
Toolbar,
Block,
Tabs, Tab,
NavRight, Popover, List, ListItem
} from 'framework7-react';
import CourseMemoList from "./memo/courseMemoList";
import InteractiveCard from "./cards/InteractiveCard";
import styled from "styled-components";
import { connect } from 'react-redux'
import { fetchMemoComments, fetchMemoCommentsMore } from '../../../actions/MemoCommentAction'
const MyPage = styled(Page)`
.tab {
overflow-y: auto;
}
`
// 课堂页
class CoursePage extends React.Component {
state = {
}
componentDidMount() {
// document.getElementById('tab-1').addEventListener('scroll', this.handleScroll);
this.onPageAfterIn()
}
handleScroll = (e) => {
// TODO 兼容性
// https://stackoverflow.com/questions/8480466/how-to-check-if-scrollbar-is-at-the-bottom
const target = e.currentTarget
if (target.scrollHeight - target.scrollTop == target.offsetHeight) {
console.log('Reached the bottom!');
const { dispatch } = this.props
// dispatch(fetchMemoCommentsMore())
}
}
fetchMemoCommentsMore = () => {
console.log('fetchMemoCommentsMore');
if (this.props.isFetching || this.fetching) return;
this.fetching = true;
const { dispatch } = this.props
dispatch(fetchMemoCommentsMore())
setTimeout(()=>{
this.fetching = false;
}, 500)
}
onPageAfterIn = () => {
const { dispatch } = this.props
dispatch(fetchMemoComments())
}
render() {
console.log(this.props.isFetching)
return (<MyPage
infinite
infiniteDistance={20}
infinitePreloader={true}
onInfinite={this.fetchMemoCommentsMore}
>
<Navbar backLink="返回">
<NavTitle>课堂</NavTitle>
<NavRight>
<Link iconIos="f7:menu" iconMd="material:menu" popoverOpen=".popover-menu"></Link>
</NavRight>
</Navbar>
<Toolbar tabbar>
<Link tabLink="#tab-1" tabLinkActive>话题</Link>
<Link tabLink="#tab-2">作业</Link>
<Link tabLink="#tab-3">互动</Link>
</Toolbar>
<Tabs swipeable>
<Tab id="tab-1" tabActive>
{/* CourseMemoList */}
<CourseMemoList {...this.props} {...this.state}></CourseMemoList>
</Tab>
<Tab id="tab-2" className="page-content">
<Block>
{/* CourseHomeWorkList */}
<p>Tab 2 content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
<p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
<p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
<p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!</p>
<p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
<p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
<p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
</Block>
</Tab>
<Tab id="tab-3" className="page-content">
{/* CourseInteractiveList */}
<InteractiveCard></InteractiveCard>
<InteractiveCard></InteractiveCard>
<InteractiveCard></InteractiveCard>
<InteractiveCard></InteractiveCard>
</Tab>
</Tabs>
<Popover className="popover-menu">
<List>
<ListItem link="/dialog/" popoverClose title="Dialog"></ListItem>
<ListItem link="/tabs/" popoverClose title="Tabs"></ListItem>
<ListItem link="/panel/" popoverClose title="Side Panels"></ListItem>
<ListItem link="/list/" popoverClose title="List View"></ListItem>
<ListItem link="/inputs/" popoverClose title="Form Inputs"></ListItem>
</List>
</Popover>
</MyPage>)
}
};
const mapStateToProps = ({ memoComments, user }) => {
return {
comments: memoComments.comments,
memos: memoComments.memos,
memoArray: memoComments.memoArray,
isFetching: memoComments.isFetching
}
}
export default connect(
mapStateToProps
)(CoursePage)