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

推薦する

CSS3 を使用して左上または右上隅にリマインダー ドットを表示するサンプル コード

効果画像(三角形をご希望の場合は、ここをクリックしてください): コード: <html>...

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....

3Dカルーセル効果を実現するjs

この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...

mysql における mydumper と mysqldump の比較

いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

Nginx でバージョン番号と Web ページのキャッシュ時間を非表示にする方法

Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

mysql ルートユーザーを認証できず、Navicat リモート認証プロンプト 1044 の問題を解決します

まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...

Ubuntu 14.04 に FTP サーバーをインストールするための実装手順

目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...

MySQL で重複レコードをクエリして削除する方法の完全なガイド

序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...

Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス

目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...

Vueプロジェクトでパラメータジャンプ機能を実装する

ページの説明:​ メインページ: 名前 —> shishengzuotanhuichaxun ...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

vue+el-element でファイル名に応じてダイアログを動的に作成する実践

目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...