最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】ReactJS中增加加载更多的提示

ReactJS crifan 399浏览 0评论

之前已经实现了:

【已解决】ReactJS中如何实现上拉加载更多数据

其中对于加载更多页面的数据时,会有底部的

加载更多。。。

的提示,但是很明显:

不好看,且容易看不到

因为是加载到对底部的,往往看不到。

所以希望:

找个更好看的,加载更多的提示

最好是原生app的那种toast最好

或者是普通的菊花转,也行

react js loading animation

reactjs – React – Display loading screen while DOM is rendering? – Stack Overflow

reactjs – React show loading spinner while DOM is rendering – Stack Overflow

javascript – Adding a loading animation when loading in ReactJS – Stack Overflow

nathanhoad/react-loading-animation: A pretty loading spinner based on Google’s colorful spinner animation.

fakiolinho/react-loading: React component for loading animations

去试试

➜  ucowsapp git:(master) ✗ npm install react-loading -S
npm WARN ucows-app@6.0.0 No repository field.
npm WARN ucows-app@6.0.0 No license field.
added 1 package and removed 1749 packages in 91.926s

用代码:

  loadingIndicator(){
    return (
      // <div class={style.loading}>正在加载…</div>
      <ReactLoading type="bars" color={"#123"} height={667} width={375} />
    );
  }

结果就警告了:

Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Loading component.

所以,放弃。

再去试试:

➜  ucowsapp git:(master) ✗ npm install -S react-loading-animation
npm WARN ucows-app@6.0.0 No repository field.
npm WARN ucows-app@6.0.0 No license field.
added 1 package in 12.949s

然后是可以显示出来的:

但是还是只能在底部显示,由于加载太快而一闪而过。

还是希望可以在屏幕中间显示就好了。

其中,希望可以让加载指示显示在屏幕中间,去参考:

div show on screen center

javascript – Positioning <div> element at center of screen – Stack Overflow

css – How to position a div in the middle of the screen when the page is bigger than the screen – Stack Overflow

css – center div in the middle of the screen – even when page is scrolled up/down – Stack Overflow

Positioning DIV element at center of screen

How to Center Floated Divs in a Container , How to Center a Floating div

【总结】

调试了半天,可以通过:

.loading {
//     border-top: 1px solid #cccac9;
//   text-align: center;
  position: absolute;
  top: 50%;
  left: calc(~"50% + 20px");
  margin-left: -40px;
  transform: translate3d(0, 100%, 50%);
}
  render () {
    let childrenArray = [this.props.children];
    // if (this.props.hasMore) {
    //   if (this.props.loader) {
    //     childrenArray.push(this.props.loader);
    //     // childrenArray.unshift(this.props.loader);
    //   }
    // }
              // <div class={style.forLoading}>
              //   {this.props.loader}
              //  </div>
    return (
        <div>
          {
            this.props.showLoading ?
            (
              <div class={style.loading}>
                {this.props.loader}
              </div>
            ) : (null)
          }
           {childrenArray}
        </div>
    );
  }
}
Scroll.PropTypes = {
  children: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.array
  ]).isRequired,
  loadMore : PropTypes.func.isRequired,
  hasMore: PropTypes.bool.isRequired,
  loader: PropTypes.object,
  showLoading: PropTypes.bool
};
Scroll.defaultProps = {
  loader: null,
  showLoading : false,
  // showLoading : true,
  hasMore: false
};

然后调用地方是:

import ReactLoadingAnimation from ‘react-loading-animation’;
  loadingIndicator(){
    return (
      // <div class={style.loading}>正在加载…</div>
      // <ReactLoading type="bars" color={"#123"} height={667} width={375} />
      <ReactLoadingAnimation />
    );
  }
            <Scroll
              loadMore={this.loadMore}
              hasMore={this.state.hasMore}
              loader={this.loadingIndicator()}
              showLoading={this.state.isLoading}
          >
            {
              deviceList.map(eachDeviceItem => {
                return (
                  <DeviceListItem deviceItem={eachDeviceItem} thisObj={this}/>
                );
              })
            }
          </Scroll>

然后loadMore中,再去控制是否是isLoading

决定是否显示loading。

效果是:

【后记】

后来看到:

yuanyan/halogen: A collection of loading spinners with React.js

去试试

➜  ucowsapp git:(master) ✗ npm install halogen –save
npm WARN ucows-app@6.0.0 No repository field.
npm WARN ucows-app@6.0.0 No license field.
added 2 packages in 12.547s

然后用代码:

// import Loading from ‘halogen/PulseLoader’;
import Loading from ‘halogen/ScaleLoader’;
      <div class={style.defaultLoading}>
        {/* <ReactLoadingAnimation /> */}
         <Loading color="#26A65B" size="100px" margin="4px" />
        {/* <Loading color="#00F" size="100px" margin="4px"/> */}
      </div>
.defaultLoading {
//     border-top: 1px solid #cccac9;
//   text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  // left: calc(~"50% + 20px");
  // margin-left: -40px;
  // transform: translate3d(0, 100%, 50%);
}

效果还可以:

注:

其余的效果,可以参考:

https://github.com/yuanyan/halogen/blob/master/example/src/index.html

中的:

                <div style={style}>PulseLoader<Halogen.PulseLoader color={color}/></div>
                <div style={style}>GridLoader<Halogen.GridLoader color={color}/></div>
                <div style={style}>ClipLoader<Halogen.ClipLoader color={color}/></div>
                <div style={style}>RiseLoader<Halogen.RiseLoader color={color}/></div>
                <div style={style}>BeatLoader<Halogen.BeatLoader color={color}/></div>
                <div style={style}>SyncLoader<Halogen.SyncLoader color={color}/></div>
                <div style={style}>RotateLoader<Halogen.RotateLoader color={color}/></div>
                <div style={style}>FadeLoader<Halogen.FadeLoader color={color}/></div>
                <div style={style}>PacmanLoader<Halogen.PacmanLoader color={color}/></div>
                <div style={style}>SquareLoader<Halogen.SquareLoader color={color}/></div>
                <div style={style}>ScaleLoader<Halogen.ScaleLoader color={color}/></div>
                <div style={style}>SkewLoader<Halogen.SkewLoader color={color}/></div>
                <div style={style}>MoonLoader<Halogen.MoonLoader color={color}/></div>
                <div style={style}>RingLoader<Halogen.RingLoader color={color}/></div>
                <div style={style}>BounceLoader<Halogen.BounceLoader color={color}/></div>
                <div style={style}>DotLoader<Halogen.DotLoader color={color}/></div>

可以找到到底对应着哪个:

好处是:

至少对于大小和颜色可以定制。

缺点是:

好像也不是太有必要换成这个。

转载请注明:在路上 » 【已解决】ReactJS中增加加载更多的提示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
15 queries in 0.231 seconds, using 10.62MB memory