コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
二、基本概念" >二、基本概念
三、容器的属性" >三、容器的属性
3.1 flex-direction属性" >3.1 flex-direction属性
3.2 flex-wrap属性" >3.2 flex-wrap属性
3.3 flex-flow" >3.3 flex-flow
3.4 justify-content属性" >3.4 justify-content属性
3.5 align-items属性" >3.5 align-items属性
3.6 align-content属性" >3.6 align-content属性
四、项目的属性" >四、项目的属性
4.1 order属性" >4.1 order属性
4.2 flex-grow属性" >4.2 flex-grow属性
4.3 flex-shrink属性" >4.3 flex-shrink属性
4.4 flex-basis属性" >4.4 flex-basis属性
4.5 flex属性" >4.5 flex属性
4.6 align-self属性" >4.6 align-self属性
ホームページ ウェブフロントエンド jsチュートリアル WeChat ミニプログラム開発の基本を説明する最初のレッスン

WeChat ミニプログラム開発の基本を説明する最初のレッスン

jacklove
jacklove
Jun 11, 2018 pm 05:56 PM
微信

1. 9*9 乗算表

test.wxml

<view class=&#39;con&#39; wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view style=&#39;display:inline-block;width:45px&#39; wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
        <view wx:if="{{j<=i}}">
            {{i}}*{{j}}={{i*j}}
        </view>
    </view>
</view>
ログイン後にコピー

test.wxss

.con{
    font-size:8px;
}
ログイン後にコピー

2. ウィンドウのスクロール

XX.wxml

<scroll-view class=&#39;aa&#39; scroll-y="ture">
<view class="a">
1
</view>
<view class="b">
2
</view>
<view class="c">
3
</view>
</scroll-view>
ログイン後にコピー

XX.wxss 

/* pages/news/news.wxss */

.aa{
  width:200px;
  height: 100px; 
}
.a{
  height: 200rpx;
  background-color: red;
}
.b{
  height: 200rpx;
  background-color: gold;
}
.c{
  height: 200rpx;
  background-color: green;
}
ログイン後にコピー

この例は垂直スクロールです


関連知識ポイント:


属性名

タイプデフォルト値Booleanfalsefalse5050使用方法 垂直スクロールする場合、に固定の高さを与え、WXSSを通じて高さを設定する必要があります。
説明スクロール- x
水平スクロールを許可scroll-yBoolean
垂直スクロールを許可上限閾値数値
もっと上から/ left 遠い場合 (単位 px)、scrolltoupper イベントがトリガーされます lower-thresholdNumber
下/右からどのくらい離れているか (単位 px)、scrollto Lower イベントがトリガーされます scroll-topNumber
垂直スクロールバーの位置を設定scroll-leftNumber
水平スクロールバーの位置を設定scroll-into-view 文字列
値は特定の子要素IDである必要があり、その要素までスクロールすると、要素の上部がスクロール領域の上部に揃えられますbindscrolltoupperEventHandle
上部までスクロール/左、scrolltoupper イベントbindscrollto lowerEventHandle
下/右にスクロール、scrollto lower イベントbindscrollEventHandle
スクロール時にトリガー、event.detail = {scrollLeft 、scrollTop、scrollHeight、scrollWidth、deltaX、deltaY}

<scroll-view/>


3. 画像カルーセル


XX.wxml

<swiper indicator-dots="ture" autoplay="ture" interval="1000" duration="1000">
<block wx:for="{{imgUrls}}">
  <swiper-item>
    <image src=&#39;{{item}}&#39;></image>
  </swiper-item>
</block>
</swiper>
ログイン後にコピー

XX.js
imgUrls:[
      "../image/1.png",
      "../image/2.png",
      "../image/3.png"
    ],
ログイン後にコピー
関連知識ポイント

属性名

タイプデフォルト値Booleanfalse false050001 000
説明indicator-dots
パネルインジケータードットを表示するかどうかautoplayBoolean
自動的に切り替えるかどうか currentNumber
現在のページのインデックスintervalNumber
自動切り替え時間間隔durationNumber
スライドアニメーションの長さ bindchangeEventHandle
現在の変更時にchangeイベントがトリガーされます。event.detail = {current: current}

注意：其中只可放置<swiper-item/> 组件，其他节点会被自动删除。

四、弹性布局

父元素设置display：flex

相关知识点：


Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;}
ログイン後にコピー

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;}
ログイン後にコピー

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;}
ログイン後にコピー

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;}
ログイン後にコピー

它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;}
ログイン後にコピー

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;}
ログイン後にコピー

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;}
ログイン後にコピー

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start（默认值）：左对齐

  • flex-end：右对齐

  • center： 居中

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;}
ログイン後にコピー

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
ログイン後にコピー

该属性可能取6个值。

  • flex-start：与交叉轴的起点对齐。

  • flex-end：与交叉轴的终点对齐。

  • center：与交叉轴的中点对齐。

  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch（默认值）：轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

  • <span style="font-size:16px;">order</span>

  • <span style="font-size:16px;">flex-grow</span>

  • <span style="font-size:16px;">flex-shrink</span>

  • <span style="font-size:16px;">flex-basis</span>

  • <span style="font-size:16px;">flex</span>

  • <span style="font-size:16px;">align-self</span>

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;}
ログイン後にコピー

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */}
ログイン後にコピー

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */}
ログイン後にコピー

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */}
ログイン後にコピー

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]}
ログイン後にコピー

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;}
ログイン後にコピー

この属性は 6 つの値を取ることができ、auto を除き、他の値は align-items 属性とまったく同じです。

この記事では、WeChat アプレット開発の基本について詳しく説明します。その他の関連コンテンツについては、php 中国語 Web サイトを参照してください。

関連する推奨事項:

CSS3 を介して 2D 変換を実行する方法

JavaScript の変数とスコープの詳細な説明

$.ajax() メソッドのパラメーターの詳細な説明


以上がWeChat ミニプログラム開発の基本を説明する最初のレッスンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7465
15
CakePHP チュートリアル
1376
52
Steamのアカウント名の形式は何ですか
77
11
Win11 Activation Key Permanent
45
19
NYTの接続はヒントと回答です
18
19
もっと見る
Related knowledge
「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた 「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた Sep 02, 2024 pm 10:45 PM

ヒントを提供してくれた中国南部のネチズン Qing Qiechensi、HH_KK、石原さとみ、Wu Yanzu に感謝します。 9月2日のニュースによると、最近「iPhone 16はWeChatをサポートしないかもしれない」という噂があるが、これに対し中国のApple公式ホットラインに電話したシェル・ファイナンスの記者は、iOSシステムやAppleデバイスは引き続きサポートできると回答したという。 WeChat と WeChat を使用する Apple App Store に引き続き掲載およびダウンロードできるかどうかの問題は、今後の状況を決定するために Apple と Tencent 間のコミュニケーションと協議が必要です。ソフトウェア App Store と WeChat の問題の説明 ソフトウェア App Store の技術コンサルタントは、ソフトウェアを Apple Store に掲載するには開発者が料金を支払う必要がある可能性があると指摘しました。一定のダウンロード数に達すると、Apple はそれ以降のダウンロードに対応する料金を支払う必要があります。 AppleはTencentと積極的にコミュニケーションをとっており、

DeepSeekイメージジェネレーションチュートリアル DeepSeekイメージジェネレーションチュートリアル Feb 19, 2025 pm 04:15 PM

DeepSeek：強力なAI画像生成ツール！ DeepSeek自体は画像生成ツールではありませんが、その強力なコアテクノロジーは、多くのAI塗装ツールを根本的にサポートしています。 DeepSeekを使用して画像を間接的に生成する方法を知りたいですか？読み続けてください！ DeepSeekベースのAIツールで画像を生成します。次の手順では、これらのツールを使用するように導きます。AIペイントツールの起動：DeepSeekベースのAIペイントツールを検索して開きます（たとえば、「Simple AI」を検索します）。描画モードを選択します。「AI図面」または同様の関数を選択し、「アニメアバター」、「ランドスケープ」などのニーズに応じて画像タイプを選択します。

事情に詳しい関係者らは「WeChatはApple iPhone 16をサポートしていない可能性がある」と回答：噂は噂 事情に詳しい関係者らは「WeChatはApple iPhone 16をサポートしていない可能性がある」と回答：噂は噂 Sep 02, 2024 pm 10:43 PM

WeChat が iPhone 16 をサポートするという噂は誤りであることが判明しました。手がかりを提供してくれたネチズン Xi Chuang Jiu Shi と HH_KK に感謝します。 9 月 2 日のニュースによると、今日 WeChat が iPhone 16 をサポートしない可能性があるという噂があります。iPhone が iOS 18.2 システムにアップグレードされると、WeChat は使用できなくなります。 『デイリー経済ニュース』によると、この噂はデマであることが関係者の話でわかったという。 Apple の回答: Shell Finance によると、中国の Apple の技術コンサルタントは、WeChat が iOS システムまたは Apple デバイスで引き続き使用できるかどうか、また WeChat が引き続き Apple App Store に掲載されダウンロードできるかどうかという問題は解決する必要があると回答しました。 Apple と Tencent の間で解決されることは、コミュニケーションと話し合いを通じてのみ、将来の状況を決定することができます。現在、Apple は Tencent と積極的に連絡をとり、Tencent が今後も継続するかどうかを確認しています。

Gateio中国の公式ウェブサイトgate.io取引プラットフォームWebサイト Gateio中国の公式ウェブサイトgate.io取引プラットフォームWebサイト Feb 21, 2025 pm 03:06 PM

2013年に設立された主要な暗号通貨取引プラットフォームであるGate.ioは、中国のユーザーに完全な公式のウェブサイトを提供します。このウェブサイトは、スポット取引、先物取引、貸付など、幅広いサービスを提供し、中国のインターフェース、リッチリソース、コミュニティサポートなどの特別な機能を提供します。

OKXトレーディングプラットフォームの取り扱い料金のリスト OKXトレーディングプラットフォームの取り扱い料金のリスト Feb 15, 2025 pm 03:09 PM

OKXトレーディングプラットフォームは、取引手数料、引き出し料金、資金調達料金など、さまざまな料金を提供しています。スポットトランザクションの場合、取引手数料はトランザクションのボリュームとVIPレベルによって異なり、「マーケットメーカーモデル」を採用します。つまり、市場はトランザクションごとに低いハンドリング料金を請求します。さらに、OKXは、通貨標準契約、USDT契約、配送契約など、さまざまな先物契約も提供しており、各契約の料金構造も異なります。

セサミオープンドアログイン登録登録ゲート。io交換登録公式ウェブサイトの入り口 セサミオープンドアログイン登録登録ゲート。io交換登録公式ウェブサイトの入り口 Mar 04, 2025 pm 04:51 PM

Gate.io（Sesame Open Door）は、世界をリードする暗号通貨取引プラットフォームです。このチュートリアルでは、アカウントの登録とログイン、KYC認定、FIAT通貨とデジタル通貨充電、取引ペアの選択、制限/市場取引注文、注文およびトランザクションレコードの表示などの手順を把握しているため、暗号通貨取引のためのgate.ioプラットフォームを迅速に開始できます。 初心者であろうとベテランであろうと、このチュートリアルから利益を得て、gate.ioの取引スキルを簡単に習得できます。

OUYI Exchange App国内ダウンロードチュートリアル OUYI Exchange App国内ダウンロードチュートリアル Mar 21, 2025 pm 05:42 PM

この記事では、中国のOUYI OKXアプリの安全なダウンロードに関する詳細なガイドを提供します。国内のアプリストアの制限により、ユーザーはOUYI OKXの公式Webサイトからアプリをダウンロードするか、公式Webサイトが提供するQRコードを使用してスキャンおよびダウンロードすることをお勧めします。ダウンロードプロセス中に、公式Webサイトのアドレスを確認し、アプリケーションの許可を確認し、インストール後にセキュリティスキャンを実行し、2要素の検証を有効にしてください。 使用中は、地方の法律や規制を遵守し、安全なネットワーク環境を使用し、アカウントのセキュリティを保護し、詐欺に対して警戒し、合理的に投資してください。 この記事は参照のみであり、投資のアドバイスを構成していません。

Gateio Exchangeアプリ古いバージョンGateio Exchangeアプリ古いバージョンダウンロードチャネル Gateio Exchangeアプリ古いバージョンGateio Exchangeアプリ古いバージョンダウンロードチャネル Mar 04, 2025 pm 11:36 PM

Gateio Exchangeアプリは、公式のサードパーティのアプリケーション市場、フォーラムコミュニティ、その他のチャネルをカバーする古いバージョン用のチャネルをダウンロードします。また、古いバージョンを簡単に取得し、新しいバージョンやデバイスの互換性を使用する際の不快感を解決するのに役立ちます。

See all articles