ユーザーエクスペリエンスを最適化するために、スケルトン画面は常に開発者に好まれる表示方法です。これは最初の画面を占め、長い待ち時間によって視聴者に不安を与えない表示方法です。ミニプログラムでのスケルトン画面の実装は比較的簡単ですが、一度も使用したことのない学生は、必然的に迷ってしまいます。今日は、ミニプログラムでのスケルトン画面の実装を共有します。 スケルトンスクリーンとはスケルトン スクリーンはページの空白バージョンであり、通常はページが完全にレンダリングされる前に、いくつかの灰色のブロックで大まかに輪郭が描かれます。データが読み込まれた後、実際のコンテンツに置き換えられます。通常、ミニプログラムでは、スケルトン画面のコードを手動でメンテナンスする必要があります。業務が変わると、スケルトン画面のコードも調整する必要があります。開発の利便性のために、開発者ツールにはスケルトン画面コードを自動的に生成する機能が用意されています。 アプレットでスケルトン画面を生成する方法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 によって制御されます。 // データを段階的に読み込み、読み込みを徐々に非表示にする プログレッシブロード() { タイムアウトを設定する(() => { this.setData({ 読み込み中: false }) }, 1000) }, オンロード() { this.progressiveLoad() // データを段階的に読み込み、読み込みを徐々に非表示にする } 開発者は、必要に応じてテキスト、画像、ボタンの色や形を設定したり、除外、削除、非表示などに従って一部のページ要素を無視または非表示にして、より優れた表示効果を得ることもできます。具体的な設定については、スケルトン画面の公式ドキュメントを参照してください。 WeChatアプレットスケルトン画面の実装例に関するこの記事はこれで終わりです。より関連性の高いアプレットスケルトン画面の内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様の今後の123WORDPRESS.COMへのご支援をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: トランザクションとロックを表示するための MySQL の一般的なステートメント
>>: Docker共通コマンドの詳しい解説 Study03
ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...
vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...
目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...
まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...
ソース ファイルを右クリックすると、次のコードが見つかります。 1. CSSを使用してFirefox...
MySQL がバージョン 5.7 にアップグレードされた後、セキュリティが大幅に向上しました。しかし...