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;
}
领取专属 10元无门槛券
私享最新 技术干货