react骨架屏

fiveoneLei發表於2018-01-04
原文網址 : https://juejin.im/post/5a4d9fc2f265da43052f0944
React

ehome-react-skeleton

一個可以自動生成react骨架屏的webpack loader.

起始

菊花的loading圖太low，骨架屏更美觀。公司UI不願意為設計骨架屏圖片（在一個小公司，UI也比較少）！後來我想了一下能不能通過webpack自動生成骨架屏，有了這個想法之後我就開始動手設計了,發現是可行所以初步寫了一個loader 當然還只是個初始版本還有很多優化和改進的部分.最近這段時間比較忙，過了這段時間我會加以優化和改善輸出一個穩定的版本。

安裝

cnpm i ehome-react-skeleton --save

配置

{
    test:/\.(js|jsx)$/,
    include:paths.src,
    use:[
        {
            loader: require.resolve("babel-loader"),
            options: {
                "presets": [
                    "react-app"
                ]
            }
        },
        {
            loader:require.resolve("ehome-react-skeleton")  // 在babel-loader之前配置ehome-react-skeleton
        }
    ]

}
複製程式碼

使用

demo1

import React from "react";
import ReactDom from "react-dom";
import "./index.less";

const prefix = "eh-home";
export default class Skeleton extends React.Component {

  componentWillMount() {
    this.setState({
      ownerHotLines: [{
        description: "中國人民",
        name: "leiwuyi",
        contact: "15999650670"

      }]

    });
  }
  render() {
    const { state, props } = this;
    return (
        <div className={`${prefix}-ownerservice`}>
            <div>
                {state.ownerHotLines.map(hotline => {
                  return <div className={`${prefix}-ownerservice`} SKELETON>
                            <div className="block">
                                <div className="block-avatar">
                                    <img  />
                                </div>
                                <div className="block-content">
                                    <div className="block-content-title">
                                       中國人民
                                    </div>
                                    <div className="block-content-contact">
                                        <span style={{ marginRight: 20 }}>leiwuyi</span>15999650670
                                    </div>
                                </div>
                                <div className="block-message"></div>
                                <div className="block-phone"><a href="15999650670"></a></div>
                            </div>
                        </div>
                    })}
            </div>
            {SKELETON}
        </div>;
    )   
  }
}
複製程式碼

demo2

import React from "react";
import ReactDom from "react-dom";
import "./index.less";       //必須要有

const prefix = "eh-record";
export default class Record extends React.Component {

  componentWillMount() {

  }
  render() {
    const { state, props } = this;
    return <div className={`${prefix}`}>
                <div className={`${prefix}-block`} SKELETON>   // (1)
                    <div className={`${prefix}-block-header`}>
                        <div>影印</div>
                        <div>已支付</div>
                    </div>
                    <div className={`${prefix}-block-date`}>
                        2012-2-08
                    </div>
                    <div className={`${prefix}-block-filemsg`}>
                        <div>我問問.word</div>
                        <div>￥0.2</div>
                    </div>
                </div>
                {SKELETON}   
            </div>;
  }
複製程式碼
  1. index.less檔案
  2. div上的SKELETON標記的為skeleton模板
  3. 模板將替換{SKELETON}

效果

demo1
react骨架屏

結尾

github地址: 這裡

相關文章