微信小程序 3----表单组件
2017-09-11 15:59
316 查看
button
type按钮样式 primary default warn
size default 默认大小
loading 是否显示转圈圈的图标
如下
plain 按钮是否镂空如下
disable 是否禁用
hover-class 点击的一瞬间的样式
checkbox 复选框
bindchange 改变触发
form 表单 负责将其他表单组件输入的提交
提交 和 重置触发
input
placehoder 输入为空的时候显示的内容
placeholder-style
type 类型
focus :fasle 获取焦点
maxlength 最大输入长度
password :false 输入的会变成星号
disabled 是否禁用
bindinput 输入触发
picker
picker mode默认为普通单列选择器
多列选择器:mode = multiSelector
bindchange 选择改变触发
bindcolumnchange 某一列放生变化触发
value="{{index}}"
range="{{array}}"
时间选择器:mode = time
start end
.bindchange
日期选择器:mode = date
bindchange
省市区选择器:mode = region
custom-item='customItem“ 每一项自定义 例如这里的
customItem: '全部'
picker-view 嵌入页面的选择器
radio单选
slider滑块
min、max 最大最小值
step 一次滑多少
show-value 显示当前的数值
switch开关选择器
textarea多行输入框
auto-height 高度自动
focus
/** wxss **/ /** 修改button默认的点击态样式类**/ .button-hover { background-color: red; } /** 添加自定义button点击态样式类**/ .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">点击设置以上按钮disabled属性</button> <button bindtap="setPlain">点击设置以上按钮plain属性</button> <button bindtap="setLoading">点击设置以上按钮loading属性</button> <button open-type="contact">进入客服会话</button>
var types = ['default', 'primary', 'warn'] var pageObject = { 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 }) } } for (var i = 0; i < types.length; ++i) { (function(type) { pageObject[type] = function(e) { var key = type + 'Size' var changedData = {} changedData[key] = this.data[key] === 'default' ? 'mini' : 'default' this.setData(changedData) } })(types[i]) } Page(pageObject)
type按钮样式 primary default warn
size default 默认大小
loading 是否显示转圈圈的图标
如下
plain 按钮是否镂空如下
disable 是否禁用
hover-class 点击的一瞬间的样式
checkbox 复选框
<checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group>
Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, checkboxChange: function(e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) } })
bindchange 改变触发
form 表单 负责将其他表单组件输入的提交
<form bindsubmit="formSubmit" bindreset="formReset">
提交 和 重置触发
input
placehoder 输入为空的时候显示的内容
placeholder-style
type 类型
text | 文本输入键盘 |
number | 数字输入键盘 |
idcard | 身份证输入键盘 |
digit | 带小数点的数字键盘 |
maxlength 最大输入长度
password :false 输入的会变成星号
disabled 是否禁用
bindinput 输入触发
picker
<view class="section"> <view class="section__title">普通选择器</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="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}} </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> <view class="section"> <view class="section__title">省市区选择器</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> 当前选择:{{region[0]}},{{region[1]}},{{region[2]}} </view> </picker> </view>
Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' } ], index: 0, multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], objectMultiArray: [ [ { id: 0, name: '无脊柱动物' }, { id: 1, name: '脊柱动物' } ], [ { id: 0, name: '扁性动物' }, { id: 1, name: '线形动物' }, { id: 2, name: '环节动物' }, { id: 3, name: '软体动物' }, { id: 3, name: '节肢动物' } ], [ { id: 0, name: '猪肉绦虫' }, { id: 1, name: '吸血虫' } ] ], multiIndex: [0, 0, 0], date: '2016-09-01', time: '12:01', region: ['广东省', '广州市', '海珠区'], customItem: '全部' }, bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, ',值为', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndex[0]) { case 0: data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']; data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']; data.multiArray[2] = ['鲫鱼', '带鱼']; break; } data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: switch (data.multiIndex[0]) { case 0: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['猪肉绦虫', '吸血虫']; break; case 1: data.multiArray[2] = ['蛔虫']; break; case 2: data.multiArray[2] = ['蚂蚁', '蚂蟥']; break; case 3: data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']; break; case 4: data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']; break; } break; case 1: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['鲫鱼', '带鱼']; break; case 1: data.multiArray[2] = ['青蛙', '娃娃鱼']; break; case 2: data.multiArray[2] = ['蜥蜴', '龟', '壁虎']; break; } break; } data.multiIndex[2] = 0; console.log(data.multiIndex); break; } this.setData(data); }, bindDateChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, bindTimeChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ time: e.detail.value }) }, bindRegionChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ region: e.detail.value }) } })
picker mode默认为普通单列选择器
多列选择器:mode = multiSelector
bindchange 选择改变触发
bindcolumnchange 某一列放生变化触发
value="{{index}}"
range="{{array}}"
时间选择器:mode = time
start end
.bindchange
日期选择器:mode = date
bindchange
省市区选择器:mode = region
custom-item='customItem“ 每一项自定义 例如这里的
customItem: '全部'
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]] }) } })
indicator-style | String | 设置选择器中间选中框的样式 |
indicator-class | String | 设置选择器中间选中框的类名 |
<radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group>
Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, radioChange: function(e) { console.log('radio发生change事件,携带value值为:', e.detail.value) } })
slider滑块
<view class="section section_gap"> <text class="section__title">设置left/right icon</text> <view class="body-view"> <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/> </view> </view> <view class="section section_gap"> <text class="section__title">设置step</text> <view class="body-view"> <slider bindchange="slider2change" step="5"/> </view> </view> <view class="section section_gap"> <text class="section__title">显示当前value</text> <view class="body-view"> <slider bindchange="slider3change" show-value/> </view> </view> <view class="section section_gap"> <text class="section__title">设置最小/最大值</text> <view class="body-view"> <slider bindchange="slider4change" min="50" max="200" show-value/> </view> </view>
var pageData = {} for (var i = 1; i < 5; i++) { (function (index) { pageData['slider' + index + 'change'] = function(e) { console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value) } })(i) } Page(pageData)
min、max 最大最小值
step 一次滑多少
show-value 显示当前的数值
switch开关选择器
<view class="body-view"> <switch checked bindchange="switch1Change"/> <switch bindchange="switch2Change"/> </view>
Page({ switch1Change: function (e){ console.log('switch1 发生 change 事件,携带值为', e.detail.value) }, switch2Change: function (e){ console.log('switch2 发生 change 事件,携带值为', e.detail.value) } })
textarea多行输入框
<!--textarea.wxml--> <view class="section"> <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" /> </view> <view class="section"> <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;" /> </view> <view class="section"> <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus /> </view> <view class="section"> <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /> <view class="btn-area"> <button bindtap="bindButtonTap">使得输入框获取焦点</button> </view> </view> <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="form 中的 textarea" name="textarea"/> <button form-type="submit"> 提交 </button> </form> </view>
//textarea.js Page({ data: { height: 20, focus: false }, bindButtonTap: function() { this.setData({ focus: true }) }, bindTextAreaBlur: function(e) { console.log(e.detail.value) }, bindFormSubmit: function(e) { console.log(e.detail.value.textarea) } })
bindfocus | EventHandle | 输入框聚焦时触发,event.detail = {value: value} | ||
bindblur | EventHandle | 输入框失去焦点时触发,event.detail = {value: value} | ||
bindlinechange | EventHandle | 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} | ||
bindinput | EventHandle | 当键盘输入时,触发 input 事件,event.detail = {value, cursor}, bindinput 处理函数的返回值并不会反映到 textarea 上 | ||
bindconfirm | EventHandle | 点击完成时, 触发 confirm 事件,event.detail = {value: value} |
placeholder | String | 输入框为空时占位符 | ||
placeholder-style | String | 指定 placeholder 的样式 | ||
placeholder-class | String | textarea-placeholder | 指定 placeholder 的样式类 |
相关文章推荐
- 微信小程序开发—(十四)表单组件1
- 用微信小程序开店之九——小程序组件5:“表单”(3)
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 2.3.2微信小程序表单组件 checkbox
- 微信小程序表单组件picker-view(嵌入页面的滚动选择器)
- 用微信小程序开店之七——小程序组件3:“表单”(1)
- 微信小程序form表单组件示例代码
- 用微信小程序开店之八——小程序组件4:“表单”(2)
- 微信小程序-表单组件
- 自定义微信小程序视频组件播放按钮
- 微信小程序组件知识点GET
- 微信小程序组件(三)icon
- 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划
- 微信小程序 video组件详解
- 微信小程序 WeUI 组件使用教程
- 微信小程序开发教程之组件开发以及wxss介绍
- 微信小程序把玩(十一)icon组件
- 微信小程序getPhoneNumber快速获取用户手机号组件
- 微信小程序把玩(十七)input组件