ユーザーエクスペリエンスを最適化するために、スケルトン画面は常に開発者に好まれる表示方法です。これは最初の画面を占め、長い待ち時間によって視聴者に不安を与えない表示方法です。ミニプログラムでのスケルトン画面の実装は比較的簡単ですが、一度も使用したことのない学生は、必然的に迷ってしまいます。今日は、ミニプログラムでのスケルトン画面の実装を共有します。 スケルトンスクリーンとはスケルトン スクリーンはページの空白バージョンであり、通常はページが完全にレンダリングされる前に、いくつかの灰色のブロックで大まかに輪郭が描かれます。データが読み込まれた後、実際のコンテンツに置き換えられます。通常、ミニプログラムでは、スケルトン画面のコードを手動でメンテナンスする必要があります。業務が変わると、スケルトン画面のコードも調整する必要があります。開発の利便性のために、開発者ツールにはスケルトン画面コードを自動的に生成する機能が用意されています。 アプレットでスケルトン画面を生成する方法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
効果画像(三角形をご希望の場合は、ここをクリックしてください): コード: <html>...
目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...
いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
Nginx の最適化 - バージョン番号と Web ページのキャッシュ時間を非表示にするバージョン番...
目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...
まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...
目次インストールソフトウェア管理匿名アクセスモード設定ファイルを変更するクライアントがサーバーにログ...
序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...
目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...
ページの説明: メインページ: 名前 —> shishengzuotanhuichaxun ...
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...