背景

上一篇文章我們講述了微信小程序的三個基礎組件icon、text和progress。這些基礎組件主要用途是進行信息展示，微信小程序除了信息展示還需要與用戶交互，而表單是應用中獲取用戶輸入的重要手段，它對于系統(tǒng)極其重要，用戶在應用中輸入的大部分內(nèi)容都是在表單元素中完成的，本篇文章著重介紹表單組件的特性，至于數(shù)據(jù)如何傳輸?shù)胶蠖螘谥蟮奈恼轮亟榻B。

radio組件

單選框可以用來生成一組單選按鈕，供用戶從一批固定的選項中做出選擇，它適用于數(shù)據(jù)不多的情況，小程序中的單選框是由ra-group和radio兩個組件組成，一個包含多個radio和radio-group表示一組單選項，在同一組的單選項是互斥的。radio的選中態(tài)不能直接獲取，需要通過radio-group的change事件獲取。radio-group內(nèi)部除了包含radio還可以包含其他標簽，當包含其他標簽時，也僅僅對標簽內(nèi)部的radio產(chǎn)生影響，radio-group僅有一個屬性bindchange。bindchange綁定radio-group的change事件，當radio-group中的選項發(fā)生改變時觸發(fā)change事件。

radio是radio-group中的一個單選按鈕，具有以下屬性：

• value：當radio選中時，radio-group的change事件會攜帶radio的value
• checked：當前radio是否選中，一個radio-group中只有一個radio的checked為true。
• disabled：是否禁用，禁用后不能點擊
• color：radio的顏色，同CSS的color

<radio-group bindchange="changeChoosed">
<view wx:for="{{radios}}">
<radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.text}}
</view>
</radio-group>

Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        radios: [
            {value : "1", text : "逍遙游", checked : false},
            {value : "2", text : "齊物論", checked : false},
            {value : "3", text : "秋水", checked : false},
            {value : "4", text : "養(yǎng)生主", checked : false}
        ]
    },

    changeChoosed : function(event) {
        console.log('選中了：', event.detail.value);
    },
   
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
    
    },
})

結(jié)果如圖

checkbox組件

與單選框一樣，小程序中的復選是由checkbox-group和checkbox兩個組件組合而成，與radio-group組件相同，checkbox-group用于包裹checkbox，也只有一個屬性bindchange綁定checkbox-group的change事件，當選項發(fā)生改變時觸發(fā)，event.detail.value是選中value的數(shù)組。

checkbox是多選項中的一個，屬性與radio相同

• value：checkbox標識，當checkbox選中時，checkbox-group的change事件會攜帶checkbox的value
• checked：當前checkbox是否選中，一個checkbox-group中只有一個checkbox的checked為true。
• disabled：是否禁用，禁用后不能點擊

<checkbox-group bindchange="changeChoosed">
<view wx:for="{{radios}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>{{item.text}}
</view>
</checkbox-group>

Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        radios: [
            {value : "1", text : "逍遙游", checked : false},
            {value : "2", text : "齊物論", checked : false},
            {value : "3", text : "秋水", checked : false},
            {value : "4", text : "養(yǎng)生主", checked : false}
        ]
    },

    changeChoosed : function(event) {
        console.log('選中了：', event.detail.value);
    },
   
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
    
    },
})

最后結(jié)果如圖

switch

switch是可以在兩種狀態(tài)下切換的開關選擇器，現(xiàn)在很多APP都使用，最常見的就是iOS和Android的系統(tǒng)開關，其在功能上與checkbox有點接近，不過switch是單獨使用的，其屬性如下：

• checked：是否被選中，默認為false
• type：UI樣式，有兩個值，默認是switch，另一個為checkbox
• bindchange：當狀態(tài)改變時觸發(fā)狀態(tài)，event.detail.value可以獲取值

<view wx:for="{{switchs}}">
<switch style="margin-top: 30px; zoom:.8;" data-name="{{item.name}}" type="{{item.type}}" checked="{{item.checked}}" bindchange="{{item.changeEventName}}"/>
</view>

Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        switchs: [
            {name : "switch1", checked : "false", type : 'switch', changeEventName : 'change'},
            {name : "switch2", checked : "false", type : 'checkbox', changeEventName : 'change'}
            
        ]
    },

    change : function(event) {
        console.log('選中了：', event.detail.value);
    },
   
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
    
    },
})

效果如下：

label組件

在radio和checkbox案例中，點擊文案時不能選中對應的單選或復選框，這時可以使用label改進表單組件的可用性，通過綁定for屬性讓用戶點擊label時觸發(fā)對應的組件，目前可以綁定控件有button、checkbox、radio和switch,微信小程序中label觸發(fā)規(guī)則有兩種：

• 將控件放在標簽內(nèi)，當用戶點擊時觸發(fā)label中的第一個控件
• 設置label的for屬性，當用戶點擊時觸發(fā)for屬性對應的控件，for屬性的優(yōu)先級高于內(nèi)部控件

<radio-group>
<label><radio/>逍遙游</label>
<label><radio/>人世間</label>
<label><radio/>秋水</label>
<label><radio/>齊物論</label>

</radio-group>

<radio-group>
<radio id="label1"><label for="lebel1">逍遙游</label></radio>
<radio/>人世間
<radio/>秋水
<radio/>齊物論
</radio-group>

slider組件

滑動選擇器是一種常用的組件如手機上的亮度調(diào)節(jié)工具，微信小程序提供了slider組件快速生成一個符合系統(tǒng)UI的滑動選擇器，其屬性如下

• min：最小值，默認為0
• max：最大值，默認為1000
• step：步長，必須大于0且能被（max-min）整除
• disable：是否禁用
• value：當前取值，默認為0
• color：背景條顏色默認值為#e9e9e9
• selected-color：已選擇的顏色
• show-value：是否在右側(cè)顯示當前value
• bindchange：完成一次拖動后觸發(fā)的事件

<slider show-value="true" max="10" min="0" step="1"/>

最后

有興趣可以關注公眾號QStack，會定期分享一些文章和免費的學習資料。文章來源地址http://www.zghlxwxcb.cn/news/detail-512859.html

到了這里，關于微信小程序開發(fā)入門教程（十二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！