WeChatアプレットが9マスグリッド効果を実現

WeChatアプレットが9マスグリッド効果を実現

この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. Jiugongge 実装の例図:

ヒント:説明:

レイアウトの互換性を保つには、 display: -webkit-flex;を使用します。

各行の 3 つのアイコンの 2 つのペアjustify-content: space-between;

親要素はflex-wrap: wrap;プロパティを wrap に設定する必要があります。そうでない場合は 1 行に表示されます。

width: 33.33333333%;占有サイズに応じて割り当てられます。

要素を中央に配置するにはjustify-content:center;プロパティを使用します。

flex-direction: column;およびflex-wrap: wrap;プロパティを使用して、 icontext要素を垂直に配置するように設定します。

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがフリップカード抽選アニメーションを実装
  • フリップカードゲームのWeChatミニプログラムバージョン
  • WeChatアプレットが9マス抽選を実装
  • WeChatアプレットプロジェクトの実践:9グリッドの実装とアイテムジャンプ機能
  • WeChat アプレット 9 マス グリッドのサンプル コード
  • WeChatアプレットが9マスのグリッドフリップアニメーションを実現

<<:  Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法

>>:  MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

推薦する

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

Linux で fdisk を使用してディスクをパーティション分割する方法

Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...

JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...

Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...

ウェブページ作成によく使われる英語フォント

アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...

よく使われるn番目の子セレクターをまとめる

序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...

Nginx ソースコード調査における nginx 電流制限モジュールの詳細な説明

目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...

jQuery を使用してカルーセル効果を実装する

この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...

現在のMySQL接続数を表示する方法の詳細な説明

1. 現在のすべての接続の詳細情報を表示します。 ./mysqladmin -uadmin -p -...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...

cmd と python での MySQL の一般的な操作についての簡単な説明

環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...