checkbox 组件，form 组件，input 组件

01

checkbox 组件

不得不吐糟下 checkbox 默认样式真是有点略丑！！！checkbox 组件为一个多选框被放到 checkbox-group 组中，并在 checkbox-group（只能包含checkbox）中设置监听事件。

checkbox-group 监听方法：

checkbox 多选属性：

wxml

js

Page({

/**

初始化数据

*/

data:{

items: [

,

,

,

,

]

},

/**

* 监听 checkbox 事件

*/

listenCheckboxChange:function(e) {

console.log('当 checkbox-group 中的 checkbox 选中或者取消是我被调用');

//打印对象包含的详细信息

console.log(e);

},

onLoad:function(options){

// 页面初始化 options 为页面跳转所带来的参数

},

onReady:function(){

页面渲染完成

},

onShow:function(){

页面显示

},

onHide:function(){

页面隐藏

},

onUnload:function(){

页面关闭

}

})

02

form 组件

form 表单组件 是提交 form 内的所有选中属性的值，注意每个form表单内的组件都必须有name属性指定否则提交不上去，button 中的 type 两个submit，reset 属性分别对应 form 的两个事件

主要属性：

wxml

{}

js

Page({

/**

初始化数据

*/

data:{

items: [

,

,

,

,

]

},

listenCheckboxChange: function() {

console.log(e.detail.value);

},

onLoad:function(options){

// 页面初始化 options 为页面跳转所带来的参数

}

})

03

input 组件

input 输入框使用的频率也是比较高的。。。样式的话自己外面包裹个 view 自己定义。input 属性也不是很多，有需要自己慢慢测，尝试

主要属性：

wxml

rPhoneInput" />

nerPasswordInput"/>

js

Page({

/**

初始化数据

*/

data:{

phone: '',

password: '',

},

/**

监听手机号输入

*/

listenerPhoneInput: function(e) {

},

/**

监听密码输入

*/

listenerPasswordInput: function(e) {

},

/**

监听登录按钮

*/

listenerLogin: function() {

//打印收入账号和密码

},

onLoad:function(options){

页面初始化 options 为页面跳转所带来的参数

},

onReady:function(){

页面渲染完成

},

onShow:function(){

页面显示

},

onHide:function(){

页面隐藏

},

onUnload:function(){

页面关

wxss

.input{

padding-left: 10px;

height: 44px;

}

.inputView{

border:2px solid red;

border-radius: 40px;

margin-left: 15px;

margin-right: 15px;

margin-top: 15px;

}