微信小程序常用表單組件的使用詳解

第微信小程序常用表單組件的使用詳解目錄1、常用表單組件1.1button1.2checkbox1.3input1.4label1.5form1.6radio1.7slider1.8switch1.9textarea2、實訓小案例問卷調查

1、常用表單組件

1.1button

button為按鈕組件，是常用的表單組件之一，用于事件的觸發(fā)以及表單的提交。其屬性表如下所示。

代碼示例：

view

view7.button小案例/view

view(1)迷你按鈕/view

buttonsize="mini"type="primary"主要按鈕/button

buttonsize="mini"type="default"次要按鈕/button

buttonsize="mini"type="warn"警告按鈕/button

view(2)按鈕狀態(tài)/view

button普通按鈕/button

buttondisabled警用按鈕/button

buttonloading加載按鈕/button

view(3)增加按鈕事件/view

buttonbindgetuserinfo="getUserDetail"open-type="getUserInfo"點我獲取用戶信息/button

/view

1.2checkbox

checkbox為復選框組件，常用于在表單中進行多項數(shù)據(jù)的選擇。復選框的checkbox-group為父控件，其內部嵌套若干個checkbox子控件。

checkbox-group屬性如下：

checkbox組件的屬性如下：

代碼示例：

checkbox.wxml

view

view8.checkbox小案例/view

view利用for循環(huán)批量生成/view

checkbox-groupbindchange="checkboxChange"

labelwx:for="{{items}}"

checkboxvalue="{{}}"checked="{{item.checked}}"/{{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.3input

input為輸入框組件，常用于文本(如姓名、年齡等信息)的輸入。屬性表如下：

view

view9.input小案例/view

view(1)文字輸入框/view

inputtype="text"maxlength="10"placeholder="這里最多只能輸入10個字"/

view(2)密碼輸入框/view

inputtype="password"placeholder="請輸入密碼"/

view(3)禁用輸入框/view

inputdisabledplaceholder="該輸入框已經被禁用"/

view(4)為輸入框增加事件監(jiān)聽/view

inputbindinput="getInput"bindblur="getBlur"placeholder="這里輸入的內容將會被監(jiān)聽"/

/view

1.4label

label是標簽組件，不會呈現(xiàn)任何效果，但是可以用來改進表單組件的可用性。當用戶在label元素內點擊文本時，就會觸發(fā)此控件，即當用戶選擇該標簽時，事件會傳遞到和標簽相關的表單控件上，可以使用for屬性綁定id,也可以將空間放在該標簽內部，該組件對應屬性如下所示。

wxml

view

view10.lable小案例/view

view(1)利用for屬性/view

checkbox-group

checkboxid="tiger"checked/

labelfor="tiger"老虎/label

checkboxid="elephant"/

labelfor="elephant"大象/label

checkboxid="lion"/

labelfor="lion"獅子/label

/checkbox-group

view(2)label包裹組件/view

checkbox-group

label

checkboxchecked/老虎

/label

label

checkbox/大象

/label

label

checkbox/獅子

/label

/checkbox-group

/view

1.5form

form為表單控件組件，用于提交表單組件中的內容。form控件組件內部可以嵌套多種組件。

組件屬性如下：

form.wxml

view

view11.form小案例/view

view模擬注冊功能/view

formbindsubmit="onSubmit"bindreset="onReset"

text用戶名:/text

inputname="username"type="text"placeholder="請輸入你的用戶名"/input

text密碼:/text

inputname="password"type="password"placeholder="請輸入你的密碼"/input

text手機號:/text

inputname="phonenumber"type="password"placeholder="請輸入你的手機號"/input

text驗證碼:/text

inputname="code"type="password"placeholder="請輸入驗證碼"/input

buttonform-type="submit"注冊/button

buttonform-type="reset"重置/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事件，表單已被重置")

輸入測試數(shù)據(jù)后點擊注冊按鈕觸發(fā)表單提交事件。

1.6radio

radio為單選框組件，往往需配合radio-group組件來使用，radio標簽嵌套在radio-group當中。

radio-group組件屬性如下：

radio組件屬性如下：

radio.wxml

view

view14.radio小案例/view

view利用for循環(huán)批量生成/view

radio-groupbindchange="radioChange"

blockwx:for="{{radioItems}}"

radiovalue="{{}}"checked="{{item.checked}}"/{{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)

1.7slider

slider為滑動選擇器，用于可視化地動態(tài)改變某變量地取值。屬性表如下：

slider.wxml

view

view15.slider小案例/view

view(1)滑動條右側顯示當前進度值/view

slidermin="0"max="100"value="30"show-value/

view(2)自定義滑動條顏色與滑塊樣式/view

slidermin="0"max="100"value="30"block-size="20"block-color="gray"activeColor="skyblue"/

view(3)禁用滑動條/view

sliderdisabled/

view(4)增加滑動條監(jiān)聽事件/view

slidermin="0"max="100"value="30"bindchange="sliderChange"/

/view

1.8switch

switch為開關選擇器，常用于表單上地開關功能，屬性表如下所示。

switch.wxml

view

view16.switch小案例/view

view增加switch事件監(jiān)聽/view

switchcheckedbindchange="switch1Change"/switch

switchbindchange="switch2Change"/switch

/view

1.9textarea

textarea為多行輸入框，常用于多行文字的輸入。

2、實訓小案例問卷調查

survey.wxml

view

formbindsubmit="onSubmit"bindreset="onReset"

view1.你現(xiàn)在大幾？/view

radio-groupbindchange="universityChange"

radiovalue="大一"/大一

radiovalue="大二"/大二

radiovalue="大三"/大三

radiovalue="大四"/大四

/radio-group

view2.你使用手機最大的用途是什么？/view

checkbox-groupbindchange="mobilChange"

labelcheckboxvalue="社交"/社交/label

label

checkboxvalue="購物"/網購/label

label

checkboxvalue="學習"/學習/labellabel

checkboxvalue="其他"/其他/label

/checkbox-group

view3.平時每天使用手機多