The starting

Reward yourself an Taro skeleton screen bai automatically generated oh ~

preview

component

  1. Skeleton.ts
  import React, { FC, useState, useEffect } from 'react'
  import Taro from '@tarojs/taro'
  import { View } from '@tarojs/components'
  import { SkeletonProps } from './data.d'
  import './Skeleton.scss'

  const Skeleton: FC<SkeletonProps> = props= > {
      const { selector = 'skeleton', loading = true } = props
      const [radiusList, setRadiusList] = useState([])
      const [rectList, setRectList] = useState([])
      const [loadingTest, setLoadingTest] = useState(true)
	  
      /** * local delay emulation */
      useEffect(() = > {
          setTimeout(() = > {
              setLoadingTest(false)},2000)}, [])/** * Wait for the parent page to render to get the generated skeleton screen */Taro.eventCenter.once(Taro? .Current.router.onReady,() = > {
          initSkeleton()
      })

      /** * Initializes the request */
      const initSkeleton = () = > {
          getGraphList(selector, `${selector}-radius`).then((res: any) = > {
              setRadiusList(res)
          })
          getGraphList(selector, `${selector}-rect`).then((res: any) = > {
              setRectList(res)
          })
      }
      /** * the selector gets the node */
      const getGraphList = (ancestor, descendant) = > {
          return new Promise((resolve, reject) = > {
              if (process.env.TARO_ENV === 'weapp') {
                  Taro.createSelectorQuery().selectAll(`.${ancestor}> > >.${descendant}`)
                  .boundingClientRect().exec(rect= > {
                          resolve(rect[0])})}else {
                  Taro.createSelectorQuery().selectAll(`.${ancestor} .${descendant}`)
                  .boundingClientRect().exec(rect= > {
                      resolve(rect[0])})}})}return (
          <View>
              {loadingTest &&
                  <View className='SkeletonCmpt'>
                      {radiusList.map((radiusItem: any) => 
                          <View
                              className='skeleton skeleton-radius skeleton-animate-gradient'
                              style={{width:` ${radiusItem.width}px`, height:` ${radiusItem.height}px`, top:` ${radiusItem.top}px`, left:` ${radiusItem.left}px`}} / >
                      )}
                      {rectList.map((rectItem: any) => 
                          <View
                              className='skeleton skeleton-animate-gradient'
                              style={{width:` ${rectItem.width}px`, height:` ${rectItem.height}px`, top:` ${rectItem.top}px`, left:` ${rectItem.left}px`}} / >
                      )}
                  </View>
              }
          </View>)}export default Skeleton
Copy the code
  1. Skeleton.scss
  .SkeletonCmpt {
      @include position-way-tl(absolute, 0.0);
      width: 100vw;
      height: 100vh;
      background-color: #fff;
      overflow: hidden;
      z-index: 1000;
      .skeleton {
          position: absolute;
          background-color: #f2f3f5;
          &-radius {
              border-radius: 50%;
          }
          &-animate {
              &-blink {
                  animation: skeleton-blink 1.5 s ease-in-out infinite;
              }
              &-elastic {
                  animation: skeleton-elastic 2s ease-in-out infinite;
              }
              &-gradient {
                  background-image: linear-gradient(90deg.#f2f3f5 25%.#e6e6e6 37%.#f2f3f5 63%);
                  list-style: none;
                  background-size: 400% 100%;
                  background-position: 100% 50%;
                  animation: skeleton-gradient 1.8 sease-in-out infinite; }}}@keyframes skeleton-blink {
          50% {
              opacity:.6; }}@keyframes skeleton-elastic {
          50% {
              transform: scaleX(.3); }}@keyframes skeleton-gradient {
          0% {
            background-position: 100% 50%; 100%} {background-position: 0 50%; }}}Copy the code
  1. data.d.ts
  /** * Skeleton. Props Parameter type *@export
   * @interface SkeletonProps* /
  export interfaceSkeletonProps { selector? :string
      loading: boolean
  }
Copy the code

use

  <Skeleton selector='skeleton' loading={loading} />
  <View className='skeleton'>
      <View className='mainBox'>
          <Image className='avatar skeleton-radius' src={homeInfo.avatar} />
          <Text className='name skeleton-rect'>{homeInfo.name}</Text>// Name. Skeleton-rect {min-width: attribute placeholder}<View className='box skeleton-rect'></View>
          <Test />// Add className='skeleton-rect'</View>
  </View>
Copy the code