当无法到达页面末尾时将图像加载到图库

时间:2018-08-18 14:04:42

标签: reactjs axios infinite-scroll image-gallery flicker

我有一个图库,想要实现无限滚动,

当我到达页面末尾时,我有了一个事件处理程序, 然后调用getImages函数,该函数连接到服务器并加载100张图像,

由于某种原因,它无法加载图像,甚至(组件的)图像列表也没有使用新图像进行更新,

这可能与以下事实有关:在其余的API调用中,PER_PAGE的上限为100?

谢谢

  getImages(tag) {
    if(this.state.isLoading)
    {
      return;
    }
    this.setState({isLoading: true});
    const getImagesUrl = `services/rest/?method=flickr.photos.search&api_key=522c1f9009ca3609bcbaf08545f067ad&tags=${tag}&tag_mode=any&per_page=100&format=json&safe_search=1&nojsoncallback=1`;
    const baseUrl = '------------';
    axios({
      url: getImagesUrl,
      baseURL: baseUrl,
      method: 'GET'
    })
      .then(res => res.data)
      .then(res => {
        if (
          res &&
          res.photos &&
          res.photos.photo &&
          res.photos.photo.length > 0
        ) {
          this.setState({images: res.photos.photo});
        }
      });
  }

  handleScroll = (e) => {
    const el = e.target.documentElement;
    const bottom = el.scrollHeight - el.scrollTop === el.clientHeight;
    if (bottom) {
      this.getImages(this.props.tag);
     this.setState({isLoading: false})
     }
  }

0 个答案:

没有答案