微信小程序表單組件label,微信小程序表單提交
2017-12-22
導(dǎo)讀:label 用來(lái)改進(jìn)表單組件的可用性,使用 for 屬性找到對(duì)應(yīng)的 id ,或者將控件放在該標(biāo)簽下,當(dāng)點(diǎn)擊時(shí),就會(huì)觸發(fā)對(duì)應(yīng)的控件。 for 優(yōu)先級(jí)高于內(nèi)部控件,內(nèi)部有多個(gè)控件的時(shí)候默認(rèn)觸發(fā)...
label
用來(lái)改進(jìn)表單組件的可用性,使用for
屬性找到對(duì)應(yīng)的id
,或者將控件放在該標(biāo)簽下,當(dāng)點(diǎn)擊時(shí),就會(huì)觸發(fā)對(duì)應(yīng)的控件。
for
優(yōu)先級(jí)高于內(nèi)部控件,內(nèi)部有多個(gè)控件的時(shí)候默認(rèn)觸發(fā)第一個(gè)控件。
目前可以綁定的控件有:<button/>
, <checkbox/>
, <radio/>
, <switch/>
。
屬性名 | 類(lèi)型 | 說(shuō)明 |
---|---|---|
for | String | 綁定控件的id |
示例代碼:
<view class="section section_gap">
<view class="section__title">表單組件在label內(nèi)</view>
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for-items="{{checkboxItems}}">
<label>
<checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<view class="label-1__icon">
<view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
</view>
<text class="label-1__text">{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view>
<view class="section section_gap">
<view class="section__title">label用for標(biāo)識(shí)表單組件</view>
<radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for-items="{{radioItems}}">
<radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
<view class="label-2__icon">
<view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
</view>
<label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
</view>
</radio-group>
</view>
Page({
data: {
checkboxItems: [
{name: 'USA', value: '美國(guó)'},
{name: 'CHN', value: '中國(guó)', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本', checked: 'true'},
{name: 'ENG', value: '英國(guó)'},
{name: 'TUR', value: '法國(guó)'},
],
radioItems: [
{name: 'USA', value: '美國(guó)'},
{name: 'CHN', value: '中國(guó)', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國(guó)'},
{name: 'TUR', value: '法國(guó)'},
],
hidden: false
},
checkboxChange: function(e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.checkboxItems.length; i ++) {
if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
changed['checkboxItems['+i+'].checked'] = true
} else {
changed['checkboxItems['+i+'].checked'] = false
}
}
this.setData(changed)
},
radioChange: function(e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.radioItems.length; i ++) {
if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
changed['radioItems['+i+'].checked'] = true
} else {
changed['radioItems['+i+'].checked'] = false
}
}
this.setData(changed)
}
})
.label-1, .label-2{
margin-bottom: 15px;
}
.label-1__text, .label-2__text {
display: inline-block;
vertical-align: middle;
}
.label-1__icon {
position: relative;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: #fcfff4;
}
.label-1__icon-checked {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
background: #1aad19;
}
.label-2__icon {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 18px;
height: 18px;
background: #fcfff4;
border-radius: 50px;
}
.label-2__icon-checked {
position: absolute;
left: 3px;
top: 3px;
width: 12px;
height: 12px;
background: #1aad19;
border-radius: 50%;
}
.label-4_text{
text-align: center;
margin-top: 15px;
}
更多微信小程序開(kāi)發(fā)教程,可以關(guān)注hi小程序。
第二部分:如何開(kāi)通一個(gè)小商店
您可能感興趣: