taroウィジェットに、骨格スクリーンの実現コードを追加します。

最近では、パッケージのロードや骨格スクリーンの追加など、小プログラムの性能を最適化しましたが、今回は主に骨格スクリーンに関する内容を説明します。
骨格スクリーンについては、3つの方法があります。
1.直接UIさんにP図面を手伝ってもらい、loading図として載せてください。この方法は簡単で乱暴ですが、助けてもらう必要があります。
2.各ページごとに同じコードでスタイルを上書きします。この方法の工事量は分かります。
3.セットを書いてもいいですか？要素の位置情報を自動的に取得してレンダリングし、データが戻ったらアンインストールします。
次は主に第三の方法です。
メインフレームはtaroを採用しています。コードはマルチエンドに対応していますが、今日のコードは互換性を考慮しなければなりません。
上の考えによって、私達はまず骨格のスクリーンの容器を探し当てて、それからPを探し当てて灰色の元素になります。この元素の位置の大きさの情報を得て、最後にレンダリングしました。
要素を取得すると、taroはAPIを提供し、Taro.creat SelectorQuery()はこのAPIを通じてSelectorQueryオブジェクトのインスタンスを返し、次いでselectAll()を介して、骨格中の特定のクラスのclass名を検索し、検索した後、bounding ClienntRect()を介して要素の位置サイズ情報を取得し、これらの情報を配列に保存する。
私はここに二つの種類を書いています。一つはスカーレットオン-radiusで、円形をレンダリングします。一つはskeleeton-rectで、長方形をレンダリングします。後はみんな自分で広げます。
文字が多すぎて、ちょっと雲の中のように見えます。下にコードを入れます。

  //                       : >>>
  //   H5       (.the-ancestor .the-descendant)   ，               
  //                    (.the-ancestor >>> .the-descendant)，     `.${this.props.selector} >>> .${this.props.selector}-radius`
  if (process.env.TARO_ENV === 'weapp') {
    Taro.createSelectorQuery().selectAll(`.${this.props.selector} >>> .${this.props.selector}-radius`)
      .boundingClientRect().exec(rect => {
        that.setState({
          radiusList: rect[0]
        });
      });
  }
  else {
    Taro.createSelectorQuery().selectAll(`.${this.props.selector} .${this.props.selector}-radius`)
    .boundingClientRect().exec(rect => {
      that.setState({
        radiusList: rect[0]
      });
    });
  }

上のコメントも見ましたが、マルチエンドで動作するなら、環境を判断して、環境によって異なるセレクタを使うことができます。上のコードは円形の灰色のエリアです。皆さんが複数の形のニーズがあれば、簡単に関数をパッケージ化できます。ここでは詳しく説明しません。具体的にはDemoに詳しく調べてみます。
詳しく後代セレクタの互換性について説明します。

Baiduのウィジェットは現在、カスタムコンポーネントにまたがる選択器をサポートしていません。

ですが、H 5は後代セレクタ（.the-ancestor.the-descendant）を使用すると、自動的にカスタムコンポーネント内の後裔を識別することができます。カスタムコンポーネントを使用すると、外層に要素パッケージがあるかどうかは、カスタムコンポーネント内部の指定クラスセレクタに認識されます。

マイクロクレジットウィジェットは、カスタムコンポーネントにまたがる末裔セレクタ(.the-ancestor>>.the-descendant)をサポートしていますが、カスタムコンポーネントを使用する場合、外層は要素を入れ子できません。そうでなければ識別できません。

次にレンダリングします。これは比較的簡単です。直接コードを入れます。ここの背景色とPをストライプ状にするなどの要素の背景色はコンポーネントを使う時にカスタマイズして入ってもいいです。標準色があります。

 <View className='skeleton-container' style={{background: `${bgColor}`}}>
      {
        radiusList.map(radiusItem => (
          <View className='skeleton-item skeleton-item-radius' style={{width: `${radiusItem.width}PX`, height: `${radiusItem.height}PX`,
            background: `${itemColor}`, top: `${radiusItem.top}PX`, left: `${radiusItem.left}PX`}}
          />
        ))
      }
      {
        rectList.map(rectItem => (
          <View className='skeleton-item' style={{width: `${rectItem.width}PX`, height: `${rectItem.height}PX`,
            background: `${itemColor}`, top: `${rectItem.top}PX`, left: `${rectItem.left}PX`}}
          />
        ))
      }
    </View>

ここで、コンポーネントはすでに完成しています。使用時に直接にコンポーネントを導入して、selectorに渡せばいいです。データは動的に取得されていますので、ページが空になります。ここではmockの偽データが必要です。カバーする要素類名はコンポーネントの中の図形類と一致していなければなりません。

  <View className='container' style={{fontSize: '20PX'}}>
      {
        showSkeleton && <Skeleton
          selector='skeleton'
          bgColor='pink'
          itemColor='skyblue'
        />
      }
      <View className='skeleton'>
        <View className='userInfo'>
          <Image
            src={userInfo.avatarUrl}
            alt='    '
            className='userInfo-avatar skeleton-radius'
          />
          <Text>{userInfo.nickName}</Text>
        </View>
        <View>
          {
            list.map(item => (
              <View className='skeleton-rect' style={{marginBottom: '30PX'}}>{item}</View>
            ))
          }
        </View>
        {/*                ，           ，  H5     */}
        <List />
      </View>
    </View>

コメントを見ましたか？ユーザー定義のコンポーネントを使う時、必ず注意してください。ユーザー定義のコンポーネントが要素によってエラーが発生したら、マイクロクレジットのプログラムはユーザー定義のコンポーネント内のグラフィッククラスを識別できません。
最後に骨格のスクリーンを使うシーンに適しています。ページの構造は簡単で、元素の幅が高くて固定されています。元素の幅が高くて固定されていない場合、あなたが書いたmock偽のデータは実際にレンダリングしたページとの差が大きいかもしれません。例えば、滝流です。
はい、今回の収穫はここまでです。皆さん、もっといい方法があれば、伝言をしてください。最後に、完全なコード住所を添付します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。