Question

我正在使用Meteor和React。我无法实现无限滚动。我尝试了不同的npm和Meteor软件包，它仍然无法正常工作。 “createContainer”订阅“链接”的整个数据集，然后在应用程序中呈现。如果用户位于页面末尾，如何只订阅9个条目并加载更多？我花了一整天的时间，请帮助我！

class DealsList extends Component {


    renderList() {
        return this.props.links.map(link => {
        const url = `/travels/${link._id}`;

        return (
            <div className="col-md-4" key={link._id}>
            <Link  to={url} id={link._id}>
                <div className="thumbnail">

                <div className="imageProp">
                    <div className="caption readMore">SHOW DEAL <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
                    <img src={link.image} alt="Just another travel deal" />
                </div>

                <div className="caption">
                    <h4>{link.title}</h4>
                    {/*<p className="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p>
                    <p><a href="#" className="btn btn-primary" role="button">Button</a></p>*/}
                </div>

                </div>
            </Link>
            </div>

        );
        });
    }


    render() {

        return (
          <div> 
          <FirstCarousel />
          <div className="container-fluid containerPadding cards-row">
              <div className="row">

              <div className="col-lg-12">
                  <div className="row grid">
                      {this.renderList()}
                  </div>
              </div>

              </div>

          </div>
          </div>
        );
    }
}



export default createContainer(() => {

Meteor.subscribe('links');

return { links: Links.find({}).fetch() };
}, DealsList);

Answer 1

有一个很好的chapter about pagination and infinite scroll in the Meteor Guide，你应该看一下。从本质上讲，您需要做的是为lists发布提供一个参数来指定将要获取的项目数，如下所示：

Meteor.publish('links', (limit) => {
  const options = {
    sort: {time: -1}, // Or some other relevant sorting
    limit
  };
  return Links.find({}, options);
};

现在您的父组件包含您的DealsList，您需要做两件事：1。保留limit的状态变量，其中包含一些适当的初始值，传递给你的DealsList。 2.当用户到达页面底部时，将此限制增加一些。如果您搜索，可以找到有关如何执行此操作的多个指南，例如，您可以查看this。

完成后，您只需在订阅中使用limit参数，如下所示：

export default createContainer((props) => {
  Meteor.subscribe('links', props.limit);
  return { links: Links.find({}).fetch() };
}, DealsList);

React + Meteor中的无限滚动

1 个答案: