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

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へのご支援をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • よりエレガントなWeChatアプレットスケルトン画面の実装
  • WeChatアプレットでスケルトンスクリーンを使用する方法
  • Taroアプレットにスケルトン画面実装コードを追加
  • ミニプログラムのスケルトン画面を構築する方法
  • WeChatアプレットスケルトン画面のアプリケーションと実装手順の詳細な記録

<<:  トランザクションとロックを表示するための MySQL の一般的なステートメント

>>:  Docker共通コマンドの詳しい解説 Study03

推薦する

HTML ハイパーリンクの詳細な説明

ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...

Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

Navicat for MySQL チュートリアル

まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...

JavaScript の差異を利用して比較ツールを実装する

序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

ウェブページのコピー防止機能の実装方法(クラッキング手法付き)

ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...

Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法

MySQL がバージョン 5.7 にアップグレードされた後、セキュリティが大幅に向上しました。しかし...