小程序表单组件：按钮、复选框、表单等
目录
button
按钮
Alt text
Alt text 示例代码：
.button-hover {
background-color: red;
} .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> <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button> <button open-type="openSetting">打开授权设置页</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
})
},
onGotUserInfo: function(e) {
console.log(e.detail.errMsg)
console.log(e.detail.userInfo)
console.log(e.detail.rawData)
},
}
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)
Alt text
checkbox
多选项目。
Alt text 示例代码：
<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)
}
})
.checkbox{
display:flex; flex-direction:row-reverse;
}
Alt text
editor
富文本编辑器，可以对图片、文字进行编辑。
编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入这段样式，并维护的结构。
图片控件仅初始化时设置有效。
Alt text 示例代码：
<editor
id="editor" class="ql-container" placeholder="模板:Placeholder" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="模板:ReadOnly" bindready="onEditorReady">
</editor>
Page({
readOnlyChange() {
this.setData({
readOnly: !this.data.readOnly
})
},
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
}).exec()
},
format(e) {
let { name, value } = e.target.dataset
if (!name) return
// console.log('format', name, value)
this.editorCtx.format(name, value)
},
})
form
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
Alt text 示例代码：
<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 form-type="submit">Submit</button>
<button form-type="reset">Reset</button>
</view>
</form>
Page({
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})
input
输入框。该组件是原生组件，使用时请注意相关限制。
Alt text 示例代码：
<view class="section">
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view> <view class="section">
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="模板:Focus" /> <view class="btn-area"> <button bindtap="bindButtonTap">使得输入框获取焦点</button> </view>
</view> <view class="section">
<input maxlength="10" placeholder="最大输入长度10" />
</view> <view class="section">
<view class="section__title">你输入的是：模板:InputValue</view> <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view> <view class="section">
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view> <view class="section">
<input password type="number" />
</view> <view class="section">
<input password type="text" />
</view> <view class="section">
<input type="digit" placeholder="带小数点的数字键盘"/>
</view> <view class="section">
<input type="idcard" placeholder="身份证输入键盘" />
</view> <view class="section">
<input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
//input.js Page({
data: {
focus: false,
inputValue:
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindKeyInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function(e) {
var value = e.detail.value
var pos = e.detail.cursor
if(pos != -1){
//光标在中间
var left = e.detail.value.slice(0,pos)
//计算光标的位置
pos = left.replace(/11/g,'2').length
}
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g,'2'),
cursor: pos
}
//或者直接返回字符串,光标在最后边 //return value.replace(/11/g,'2'), }
})
label
用来改进表单组件的可用性。
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch。
Alt text 示例代码：
<view class="section section_gap"> <view class="section__title">表单组件在label内</view> <checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for="[
http://www.example.com 链接标题
媒体文件:范例.ogg]">
<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标识表单组件</view> <radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for="模板: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: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本', checked: 'true'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
],
radioItems: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
],
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;
}
Alt text
picker
从底部弹起的滚动选择器。
Alt text 示例代码:
<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;
break;
}
console.log(data.multiIndex);
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
})
}
})
Alt text
radio
单选项目。
Alt text 示例代码:
<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)
}
})
Alt text
slider
滑动选择器。
Alt text 示例代码：
<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)
Alt text
switch
开关选择器。
Alt text 示例代码：
<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)
}
})
Alt text
textarea
多行输入框。该组件是原生组件，使用时请注意相关限制。
Alt text 示例代码:
<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)
}
})
