WeChatアプレットのスケルトン画面の実装例

ユーザーエクスペリエンスを最適化するために、スケルトン画面は常に開発者に好まれる表示方法です。これは最初の画面を占め、長い待ち時間によって視聴者に不安を与えない表示方法です。ミニプログラムでのスケルトン画面の実装は比較的簡単ですが、一度も使用したことのない学生は、必然的に迷ってしまいます。今日は、ミニプログラムでのスケルトン画面の実装を共有します。

スケルトンスクリーンとは

スケルトン スクリーンはページの空白バージョンであり、通常はページが完全にレンダリングされる前に、いくつかの灰色のブロックで大まかに輪郭が描かれます。データが読み込まれた後、実際のコンテンツに置き換えられます。通常、ミニプログラムでは、スケルトン画面のコードを手動でメンテナンスする必要があります。業務が変わると、スケルトン画面のコードも調整する必要があります。開発の利便性のために、開発者ツールにはスケルトン画面コードを自動的に生成する機能が用意されています。

アプレットでスケルトン画面を生成する方法

WeChat 開発者ツールは、現在のページのスケルトン画面を生成できます。ツールの入り口は、シミュレータ パネルの右下隅にある 3 つのドットにあります。

導入方法

スケルトン画面コードはミニプログラムテンプレートを通じて導入されます。pages/index/indexページを例にとると、導入方法は次のとおりです。

<!-- pages/index/index.wxml インポート テンプレート -->
<import src="index.skeleton.wxml"/>
<テンプレート is="skeleton" wx:if="{{loading}}" データ="{{}}"/>

/* pages/index/index.wxss にスタイルをインポートします*/
@import "index.skeleton.wxss";

表示と非表示

通常のテンプレートと同様に、表示と非表示は wx:if によって制御されます。
遅延読み込みを設定したり、ページのすべてのデータ要求が成功した後にスケルトン画面を非表示にしたりできます。
遅延読み込みコードは onLoad ライフサイクル内に配置され、コードは次のようになります。

   // データを段階的に読み込み、読み込みを徐々に非表示にする
  プログレッシブロード() {
    タイムアウトを設定する(() => {
      this.setData({
        読み込み中: false
      })
    }, 1000)
  },

  オンロード() {
    this.progressiveLoad() // データを段階的に読み込み、読み込みを徐々に非表示にする
  }

開発者は、必要に応じてテキスト、画像、ボタンの色や形を設定したり、除外、削除、非表示などに従って一部のページ要素を無視または非表示にして、より優れた表示効果を得ることもできます。具体的な設定については、スケルトン画面の公式ドキュメントを参照してください。

WeChatアプレットスケルトン画面の実装例に関するこの記事はこれで終わりです。より関連性の高いアプレットスケルトン画面の内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様の今後の123WORDPRESS.COMへのご支援をよろしくお願いいたします。