微信小程序之入門篇（一）
微信小程序之注冊篇（二）
微信小程序之開發(fā)初體驗（三）——開發(fā)工具使用和目錄結(jié)構(gòu)
微信小程序之生命周期（四）
微信小程序之數(shù)據(jù)綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎(chǔ)組件篇——視圖容器（七）
微信小程序之基礎(chǔ)組件篇——基礎(chǔ)內(nèi)容（八）
微信小程序之基礎(chǔ)組件篇——表單組件（九）
微信小程序之基礎(chǔ)組件篇——導(dǎo)航組件（十）
微信小程序之基礎(chǔ)組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）
本篇文章將介紹小程序的基礎(chǔ)組件——表單組件睡陪。
表單組件分為11個組件:
- button
- checkbox
- form
- input
- label
- picker——普通選擇器，時間選擇器，日期選擇器够滑，默認是普通選擇器
- picker-view——嵌入頁面的滾動選擇器
- radio
- slider——滑動選擇器
- switch
- textarea
由于表單提交的組件和很多語言的表單提交方式大同小異滓玖，本文不作詳細介紹特纤，只寫一些簡單代碼铺韧，僅供參考赤炒。詳細的API可以參考吊骤。https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
button
/** wxss **/
/** 修改button默認的點擊態(tài)樣式類**/
.button-hover {
background-color: red;
}
/** 添加自定義button點擊態(tài)樣式類**/
.other-button-hover {
background-color: blue;
}
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">點擊設(shè)置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點擊設(shè)置以上按鈕plain屬性</button>
<button bindtap="setLoading">點擊設(shè)置以上按鈕loading屬性</button>
Page({
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
}
})
button組件效果
form
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
Page({
formSubmit: function(e) {
console.log('form發(fā)生了submit事件缎岗，攜帶數(shù)據(jù)為：', e.detail.value)
},
formReset: function() {
console.log('form發(fā)生了reset事件')
}
})
效果圖
picker
<view class="section">
<view class="section__title">地區(qū)選擇器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">時間選擇器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當前選擇: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
</view>
Page({
data: {
array: ['美國', '中國', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美國'
},
{
id: 1,
name: '中國'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
})
}
})
picker效果圖
picker-view
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1 ; i <= 12; i++) {
months.push(i)
}
for (let i = 1 ; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
year: date.getFullYear(),
value: [9999, 1, 1],
},
bindChange: function(e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
picker-view效果圖
