この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. Jiugongge 実装の例図: ヒント:説明: レイアウトの互換性を保つには、 各行の 3 つのアイコンの 2 つのペア 親要素は 要素を中央に配置するには 2. .js ファイルでデータ ソースを定義します。 ページ({ /** * ページデータソース */ データ: { アイコンカラー: [ 「赤」、「オレンジ」、「黄」、「緑」、「rgb(0,255,255)」、「青」、「紫」 ]、 アイコンスタイル: [ { "タイプ":"成功", "サイズ":30, "色":"#32CD32" }, { "タイプ": "success_no_circle", 「サイズ」: 30, 「色」:「オレンジ」 }, { "タイプ": "情報", 「サイズ」: 30, 「色」:「黄色」 }, { "タイプ": "警告", 「サイズ」: 30, 「色」:「緑」 }, { "タイプ": "待機中", 「サイズ」: 30, "色": "rgb(0,255,255)" }, { "タイプ": "キャンセル", 「サイズ」: 30, 「色」:「青」 }, { 「タイプ」:「ダウンロード」、 「サイズ」: 30, 「色」:「紫」 }, { "タイプ": "検索", 「サイズ」: 30, "色": "#C4C4C4" }, { "タイプ": "クリア", 「サイズ」: 30, 「色」:「赤」 } ] } }) 3. .wxss ファイルでスタイルを次のように定義します。 /* 9グリッドコンテナレイアウトスタイル*/ .グリッドアイテムコンテナ { ディスプレイ: -webkit-flex; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースの間; flex-wrap: ラップ; 上境界線: 1rpx 実線 #D9D9D9; } /* アイテムコンテナスタイル*/ .grid-item-child { ディスプレイ:フレックス; ディスプレイ: -webkit-flex; コンテンツを中央揃えにする。 flex-direction: 列; flex-wrap: ラップ; フロート: 左; 幅: 33.33333333%; 高さ: 200rpx; ボックスのサイズ: 境界線ボックス; 背景色: #FFFFFF; 右境界線: 1rpx 実線 #D9D9D9; 下部境界線: 1rpx 実線 #D9D9D9; } /* アイコンスタイル*/ .grid-item-icon { ディスプレイ:フレックス; ディスプレイ: -webkit-flex; コンテンツを中央揃えにする。 } /* テキストスタイル*/ .grid-item-label { ディスプレイ:フレックス; ディスプレイ: -webkit-flex; コンテンツを中央揃えにする。 色: #666; フォントサイズ: 14px; } 4. .wxml ファイルでの具体的な使用法: <ビュークラス='グリッドアイテムコンテナ'> <block wx:for="{{iconStyle}}" wx:key="index"> <ビュークラス='グリッドアイテム-子'> <表示> <icon class='grid-item-icon' type='{{item.type}}' size='{{item.size}}' color='{{item.color}}'/> <text class='grid-item-label'>{{item.type}}</text> </ビュー> </ビュー> </ブロック> </ビュー> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法
>>: MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析
CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...
Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...
1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...
まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...
アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...
序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...
目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...
この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...
1. 現在のすべての接続の詳細情報を表示します。 ./mysqladmin -uadmin -p -...
この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...
Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...
テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...
1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...
インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...