React 实现骨架屏组件-蒲公英云

React 实现骨架屏组件

墨蓝 2022-10-24 05:52 403阅读 0赞

思路其实就是：当数据未返回的时候，渲染骨架屏组件，数据返回之后，渲染真正的组件

| - skeletons
      | - OrderSkeletons
            | - index.js
            | - index.less
      | - index.js

index.js

export {  default as OrderSkeletons } from './OrderSkeletons';

index.js

import React, {  useState, useEffect } from 'react';
import './index.less';
export default function (props) { 
  const [state, setState] = useState(Array(3).fill(1));
  useEffect(() => { 
  }, [])
  return (
    <div className='order-skeletons'>
      { state.map(item => (
        <div className='order-item' key={ item}>
          <div className={ 'skeletons left'}></div>
          <div className='center'>
            <div className={ 'skeletons title'}></div>
            <div className={ 'skeletons price'}></div>
            <div className={ 'skeletons time'}></div>
          </div>
          <div className={ 'skeletons pay'}>
          </div>
        </div>
      ))}
    </div>
  )
}

index.less

@import '../../assets/mixin.less';
.order-skeletons { 
  .order-item { 
    .flex(row, flex-start);
    margin-bottom: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box; .left { 
      width: 120px;
      height: 80px;
    }
    .center { 
      flex: 1;
      margin: 0 12px; .price { 
        margin: 12px 0;
        width: 50px;
      }
      .time { 
        width: 120px;
      }
    }
    .pay { 
      margin-right: 4px;
      width: 70px;
      height: 30px;
    }
  }
}
/* Skeletons效果 */
.skeletons { 
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 20px;
  background-color: #ededed;
}
.skeletons:empty::after { 
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.253), transparent);
  animation: loading 1.5s infinite;
}
@keyframes loading {  /* 骨架屏动画 */
  from { 
    left: -100%;
  }
  to { 
    left: 120%;
  }
}

mixin.less

.flex(@direction:row, @justify:center, @align:center){ 
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
}

组件用法

import {  OrderSkeletons } from '@/skeletons'
export default function(props){ 
  const [state, setState] = useState()
  useEffect(() => { 
  }, [])
  console.log(props)
  return (
    <div>
      { isEmpty(props?.orders) ?
        <OrderSkeletons toast /> :
        <div className='tab-lists'>
          //....
        </div>
      }
    </div>
  )
}