国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

目次

1.8 switch

1.9 textarea
2、實(shí)訓(xùn)小案例–問卷調(diào)查
ホームページ WeChat アプレット ミニプログラム開発 WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

May 06, 2022 pm 05:57 PM
WeChat アプレット

この記事では、WeChat ミニ プログラム に関する関連知識(shí)を提供し、主にボタン、チェックボックス、入力、ラベル、その他の関連問題など、いくつかの一般的なフォーム コンポーネントを紹介します。それはみんなを助けます。

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

#【関連する學(xué)習(xí)の推奨事項(xiàng):

小さなプログラム學(xué)習(xí)チュートリアル]

1. よく使用されるフォーム コンポーネント

1.1 button

はボタン コンポーネントです。これは一般的に使用されるフォーム コンポーネントの 1 つであり、イベントのトリガーとフォームの送信に使用されます。その屬性テーブルを以下に示します。

コード例: WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

<view>
??<view>7.button小案例</view>
??<view>(1)迷你按鈕</view>
??<button>主要按鈕</button>
??<button>次要按鈕</button>
??<button>警告按鈕</button>
??<view>(2)按鈕狀態(tài)</view>
??<button>普通按鈕</button>
??<button>警用按鈕</button>
??<button>加載按鈕</button>
??<view>(3)增加按鈕事件</view>
??<button>點(diǎn)我獲取用戶信息</button></view>

1.2 チェックボックスWeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

はチェック ボックス コンポーネントであり、フォーム內(nèi)の複數(shù)のデータを選択するためによく使用されます。チェック ボックスの

は親コントロールであり、その中に複數(shù)の 子コントロールがネストされています。 ##<checkbox-group></checkbox-group>屬性は次のとおりです:

屬性コンポーネントの內(nèi)容は次のとおりです。 : WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

コード例:

checkbox.wxmlWeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

<view>
??<view>8.checkbox小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<checkbox-group>
????<label>
??????<checkbox></checkbox>{{item.value}}
????</label>
??</checkbox-group>
</view>
checkbox.js

Page({
??data:?{
????items:?[
??????{?name:?"tiger",?value:?"老虎"?},
??????{?name:?"elephant",?value:?"大象"?},
??????{?name:?"lion",?value:?"獅子",?checked:?"true"?},
??????{?name:?"penguin",?value:?"企鵝"?},
??????{?name:?"elk",?value:?"麋鹿"?},
??????{?name:?"swan",?value:?"天鵝"?},
????]
??},
??checkboxChange:function(e)?{
????console.log("checkbox發(fā)生change事件,攜帶value值為:",?e.detail.value)
??}})

1.3 input

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

は入力ボックス コンポーネントであり、テキスト (名前、年齢など) を入力するためによく使用されます。 )。屬性テーブルは次のとおりです:

<pre class="brush:php;toolbar:false">&lt;view&gt; ??&lt;view&gt;9.input小案例&lt;/view&gt; ??&lt;view&gt;(1)文字輸入框&lt;/view&gt; ??&lt;input&gt; ??&lt;view&gt;(2)密碼輸入框&lt;/view&gt; ??&lt;input&gt; ??&lt;view&gt;(3)禁用輸入框&lt;/view&gt; ??&lt;input&gt; ??&lt;view&gt;(4)為輸入框增加事件監(jiān)聽&lt;/view&gt; ??&lt;input&gt;&lt;/view&gt;</pre>

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する1.4 label

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

はラベル コンポーネントであり、何の効果もレンダリングされませんが、フォーム コンポーネントの使いやすさを向上させるために使用できます。ユーザーがラベル要素內(nèi)のテキストをクリックすると、このコントロールがトリガーされます。つまり、ユーザーがラベルを選択すると、イベントがラベルに関連するフォーム コントロールに渡されます。for 屬性を使用して、 id、またはスペースをタグ內(nèi)に入れることもできます。コンポーネントの対応するプロパティは次のとおりです。

wxml

<view>
??<view>10.lable小案例</view>
??<view>(1)利用for屬性</view>
??<checkbox-group>
????<checkbox></checkbox>
????<label>老虎</label>
????<checkbox></checkbox>
????<label>大象</label>
????<checkbox></checkbox>
????<label>獅子</label>
??</checkbox-group>
??<view>(2)label包裹組件</view>
??<checkbox-group>
????<label>
??????<checkbox></checkbox>老虎????</label>
????<label>
??????<checkbox></checkbox>大象????</label>
????<label>
??????<checkbox></checkbox>獅子????</label>
??</checkbox-group></view>

1.5 formWeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

はフォーム コントロール コンポーネントであり、コンポーネント內(nèi)のフォーム コンテンツを送信するために使用されます。

さまざまなコンポーネントをコントロール コンポーネント內(nèi)にネストできます。

コンポーネントのプロパティは次のとおりです。

##form.wxml

<view>
??<view>11.form小案例</view>
??<view>模擬注冊功能</view>
??<form>
????<text>用戶名:</text>
????<input>
????<text>密碼:</text>
????<input>
????<text>手機(jī)號(hào):</text>
????<input>
????<text>驗(yàn)證碼:</text>
????<input>
????<button>注冊</button>
????<button>重置</button>
??</form></view>
form.js

Page({
??onSubmit(e)?{
????console.log("form發(fā)生了submit事件,攜帶數(shù)據(jù)為:")
????console.log(e.detail.value)
??},
??onReset()?{
????console.log("form發(fā)生了reset事件,表單已被重置")
??}})
·テストに入るデータを入力してクリックすると、「登録」ボタンがフォーム送信イベントをトリガーします。

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

##1.6 radio

はラジオ ボタン コンポーネントであり、多くの場合、

< と一致させる必要があります。 ;radio-group> ;

コンポーネントが使用され、WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

タグが

にネストされます。

コンポーネントのプロパティは次のとおりです:## :

#radio.wxml

<view>
??<view>14.radio小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<radio-group>
????<block>
??????<radio></radio>{{item.value}}????</block>
??</radio-group></view>
radio.js

Page({
??data:?{
????radioItems:?[
??????{?name:?'tiger',?value:?'老虎'?},
??????{?name:?'elephant',?value:?'大象'?},
??????{?name:?'lion',?value:?'獅子',?checked:?'true'?},
??????{?name:?'penguin',?value:?'企鵝'?},
??????{?name:?'elk',?value:?'麋鹿'?},
??????{?name:?'swan',?value:?'天鵝'?},
????]
??},
??radioChange:function(e)?{
????console.log("radio發(fā)生change事件,攜帶value值為:",?e.detail.value)
??}})
WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

1.7 スライダー

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する は、変數(shù)の値を視覚的かつ動(dòng)的に変更するために使用されるスライディング セレクターです。屬性テーブルは次のとおりです:

slider.wxml

<view>
??<view>15.slider小案例</view>
??<view>(1)滑動(dòng)條右側(cè)顯示當(dāng)前進(jìn)度值</view>
??<slider></slider>
??<view>(2)自定義滑動(dòng)條顏色與滑塊樣式</view>
??<slider></slider>
??<view>(3)禁用滑動(dòng)條</view>
??<slider></slider>
??<view>(4)增加滑動(dòng)條監(jiān)聽事件</view>
??<slider></slider></view>
WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

1.8 switch

??<switch></switch>為開關(guān)選擇器,常用于表單上地開關(guān)功能,屬性表如下所示。

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

switch.wxml

<view>
??<view>16.switch小案例</view>
??<view>增加switch事件監(jiān)聽</view>
??<switch></switch>
??<switch></switch></view>

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

1.9 textarea

??<textarea></textarea>為多行輸入框,常用于多行文字的輸入。

2、實(shí)訓(xùn)小案例–問卷調(diào)查

survey.wxml

<view>
??<form>
????<view>1.你現(xiàn)在大幾?</view>
????<radio-group>
??????<radio></radio>大一??????<radio></radio>大二??????<radio></radio>大三??????<radio></radio>大四????</radio-group>

????<view>2.你使用手機(jī)最大的用途是什么?</view>
????<checkbox-group>
??????<label><checkbox></checkbox>社交</label>
??????<label>
????????<checkbox></checkbox>網(wǎng)購</label>
??????<label>
????????<checkbox></checkbox>學(xué)習(xí)</label><label>
????????<checkbox></checkbox>其他</label>

????</checkbox-group>
????<view>3.平時(shí)每天使用手機(jī)多少小時(shí)?</view>
????<slider></slider>

?????<view>4.你之前有使用過微信小程序嗎?</view>
????<radio-group>
??????<radio></radio>無??????<radio></radio>有????</radio-group>

????<view>5.談?wù)勀銓?duì)微信小程序未來發(fā)展的看法</view>
????<textarea></textarea>
????<button>提交</button>
????<button>重置</button>
??</form></view>

survey.js

Page({
??universityChange:?function?(e)?{
????console.log("你選擇的現(xiàn)在大幾:",?e.detail.value)
??},

??mobilChange:?function?(e)?{
????console.log("你選擇使用手機(jī)的最大用途是:",?e.detail.value)
??},


??timechange:?function?(e)?{
????console.log("你選擇的每天使用手機(jī)的時(shí)間是:",?e.detail.value?+?"小時(shí)")
??},

??programChange:?function?(e)?{
????console.log("你選擇的是否使用過微信小程序:",?e.detail.value)
??},
?
?
??onSubmit(e)?{
????console.log("你輸入的對(duì)小程序發(fā)展前途的看法是:"+e.detail.value.textarea)

??},
??onReset()?{
????console.log("表單已被重置")
??}})

WeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理する

【相關(guān)學(xué)習(xí)推薦:小程序?qū)W習(xí)教程

以上がWeChat ミニ プログラムの共通フォーム コンポーネントを要約して整理するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。

このウェブサイトの聲明
この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡(luò)ください。

ホットAIツール

Undress AI Tool

Undress AI Tool

脫衣畫像を無料で

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中國語版

SublimeText3 中國語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強(qiáng)力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Xianyu WeChat ミニプログラムが正式に開始 Xianyu WeChat ミニプログラムが正式に開始 Feb 10, 2024 pm 10:39 PM

Xianyu の公式 WeChat ミニ プログラムが靜かに開始されました。ミニ プログラムでは、プライベート メッセージを投稿して購入者/販売者とコミュニケーションしたり、個(gè)人情報(bào)や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評(píng)価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個(gè)人情報(bào)と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機(jī)能; 3. 使用したい場合は、購入する前に WeChat 支払いを有効にする必要があります。

WeChat ミニ プログラムに畫像フィルター効果を?qū)g裝する WeChat ミニ プログラムに畫像フィルター効果を?qū)g裝する Nov 21, 2023 pm 06:22 PM

WeChat ミニ プログラムでの畫像フィルター効果の実裝 ソーシャル メディア アプリケーションの人気に伴い、人々は寫真にフィルター効果を適用して、寫真の蕓術(shù)的効果や魅力を高めることがますます好まれています。畫像フィルター効果は WeChat ミニ プログラムにも実裝でき、より興味深く創(chuàng)造的な寫真編集機(jī)能をユーザーに提供します。この記事では、WeChat ミニ プログラムに畫像フィルター効果を?qū)g裝する方法を紹介し、具體的なコード例を示します。まず、WeChat アプレットのキャンバス コンポーネントを使用して畫像を読み込み、編集する必要があります。 Canvasコンポーネントはページ上で使用できます

WeChat アプレットにドロップダウン メニュー効果を?qū)g裝する WeChat アプレットにドロップダウン メニュー効果を?qū)g裝する Nov 21, 2023 pm 03:03 PM

WeChat ミニ プログラムでドロップダウン メニュー効果を?qū)g裝するには、特定のコード サンプルが必要です。モバイル インターネットの普及に伴い、WeChat ミニ プログラムはインターネット開発の重要な部分となり、ますます多くの人が注目し始めています。 WeChat ミニ プログラムを使用します。 WeChat ミニ プログラムの開発は、従來の APP 開発よりも簡単かつ迅速ですが、特定の開発スキルを習(xí)得する必要もあります。 WeChat ミニ プログラムの開発では、ドロップダウン メニューが一般的な UI コンポーネントであり、より良いユーザー エクスペリエンスを?qū)g現(xiàn)します。この記事では、WeChat アプレットにドロップダウン メニュー効果を?qū)g裝し、実用的な機(jī)能を提供する方法を詳しく紹介します。

Xianyu WeChat アプレットの名前は何ですか? Xianyu WeChat アプレットの名前は何ですか? Feb 27, 2024 pm 01:11 PM

Xianyu の公式 WeChat ミニ プログラムが靜かに開始され、アイドルアイテムを簡単に公開および交換できる便利なプラットフォームをユーザーに提供します。ミニ プログラムでは、プライベート メッセージを介して購入者または販売者とコミュニケーションしたり、個(gè)人情報(bào)や注文を表示したり、欲しい商品を検索したりできます。では、WeChat ミニ プログラムでは Xianyu とはいったい何と呼ばれているのでしょうか? このチュートリアル ガイドで詳しくご紹介しますので、知りたいユーザーは、この記事に従って読み続けてください。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評(píng)価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個(gè)人情報(bào)と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、マイ投稿の5つの機(jī)能、3.

WeChatアプレットは畫像アップロード機(jī)能を?qū)g裝 WeChatアプレットは畫像アップロード機(jī)能を?qū)g裝 Nov 21, 2023 am 09:08 AM

WeChat アプレットが畫像アップロード機(jī)能を?qū)g裝 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、畫像アップロード機(jī)能などの開発者定義の機(jī)能もサポートします。この記事では、WeChat アプレットに畫像アップロード機(jī)能を?qū)g裝する方法と具體的なコード例を紹介します。 1. 準(zhǔn)備作業(yè) コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時(shí)に、WeChat についても理解する必要があります。

WeChat アプレットに畫像回転効果を?qū)g裝する WeChat アプレットに畫像回転効果を?qū)g裝する Nov 21, 2023 am 08:26 AM

WeChat ミニ プログラムで畫像回転効果を?qū)g裝するには、特定のコード サンプルが必要です。WeChat ミニ プログラムは、ユーザーに豊富な機(jī)能と優(yōu)れたユーザー エクスペリエンスを提供する軽量のアプリケーションです。ミニ プログラムでは、開発者はさまざまなコンポーネントと API を使用して、さまざまな効果を?qū)g現(xiàn)できます。その中で、畫像回転効果は、ミニプログラムに興味と視覚効果を加えることができる一般的なアニメーション効果です。 WeChat ミニ プログラムで畫像の回転効果を?qū)g現(xiàn)するには、ミニ プログラムが提供するアニメーション API を使用する必要があります。以下は、その方法を示す具體的なコード例です。

WeChat アプレットを使用してカルーセル切り替え効果を?qū)g現(xiàn)する WeChat アプレットを使用してカルーセル切り替え効果を?qū)g現(xiàn)する Nov 21, 2023 pm 05:59 PM

WeChat アプレットを使用してカルーセル スイッチング効果を?qū)g現(xiàn)する WeChat アプレットは、シンプルで効率的な開発と使用特性を備えた軽量のアプリケーションです。 WeChat ミニ プログラムでは、カルーセル スイッチング効果を?qū)g現(xiàn)することが一般的な要件です。この記事では、WeChat アプレットを使用してカルーセル切り替え効果を?qū)g現(xiàn)する方法と、具體的なコード例を紹介します。まず、カルーセル コンポーネントを WeChat アプレットのページ ファイルに追加します。たとえば、&lt;swiper&gt; タグを使用すると、カルーセルの切り替え効果を?qū)g現(xiàn)できます。このコンポーネントでは、 b を渡すことができます。

WeChatミニプログラムにスライディング削除機(jī)能を?qū)g裝する WeChatミニプログラムにスライディング削除機(jī)能を?qū)g裝する Nov 21, 2023 pm 06:22 PM

WeChat ミニ プログラムにスライディング削除機(jī)能を?qū)g裝するには、特定のコード サンプルが必要です。WeChat ミニ プログラムの人気に伴い、開発者は開発プロセス中にいくつかの一般的な機(jī)能を?qū)g裝する際に問題に遭遇することがよくあります。中でも、スライド削除機(jī)能は、よく使われる一般的な機(jī)能要件です。この記事では、WeChat アプレットにスライディング削除機(jī)能を?qū)g裝する方法と具體的なコード例を詳しく紹介します。 1. 要件分析 WeChat ミニ プログラムでは、スライド削除機(jī)能の実裝には次の點(diǎn)が含まれます。 リスト表示: スライドして削除できるリストを表示するには、各リスト項(xiàng)目に次の要素が含まれている必要があります。

See all articles