微信小程序之表单组件之switch(开关选择器)+button(按钮)+checkbox(多项选择器)详解
一.switch
switch 即 开关选择器。
1.属性
2.代码
2.1.WXSS代码
.body-view {
margin-top: 10px
}
.switch-view {
margin-left: 5px
}
.class-view {
margin-top: 30px
}
2.2.WXML代码
Switch组件_switch样式
Switch组件_checkbox样式
2.3.JS代码
Page({
/**
* 页面的初始数据
*/
data: {
switch1Checked: false,
switch2Checked: true,
},
/**
* switch样式点击事件
*/
switch1Change: function (e){
console.log(`Switch样式点击后是否选中：`, e.detail.value)
},
/**
* checkbox样式点击事件
*/
switch2Change:function(e){
console.log(`Checkbox样式点击后是否选中：`, e.detail.value)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3.效果
点击 Switch
点击checkbox
二.button
button 即 按钮。
1.属性
2.代码
2.1.WXSS代码
button {
margin: 15px;
}
2.2.WXML代码
2.3.JS代码
var pageObject = {
data: {
primaryname: '绿色背景按钮(测试是否显示Loading)',
warnsize: 'default',
primaryloading: false,
defaultdisabled: false,
},
/**
* 普通按钮点击事件(测试是否可点击)
*/
defaultBindtap: function () {
this.setData({
defaultdisabled: !this.data.defaultdisabled
})
},
/**
* 绿色按钮点击事件(测试是否显示Loading)
*/
primaryBindtap: function () {
this.setData({
primaryloading: true,
primaryname: '数据加载中...'
})
},
/**
* 红色按钮点击事件(测试大小)
*/
warnBindtap: function () {
this.setData({
warnsize: 'mini'
})
},
}
Page(pageObject)
3. 效果
点击三个按钮后
三.checkbox
checkbox-group 即 多项选择器，内部由多个checkbox组成。
1.属性
checkbox 即 多选项目。
2.属性
3.代码
3.1.WXSS代码
.mychecked {
margin: 15px;
}
.checkbox {
margin: 15px;
}
.checkboxs {
margin-top: 10px;
}
3.2.WXML代码
3.3.JS代码
Page({
data: {
items: [{
name: 'USA',
value: '美国',
checked: false
},
{
name: 'CHN',
value: '中国',
checked: true
},
{
name: 'BRA',
value: '巴西',
checked: false
},
{
name: 'JPN',
value: '日本',
checked: false
},
{
name: 'ENG',
value: '英国',
checked: false
},
{
name: 'TUR',
value: '法国',
checked: false
},
]
},
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})
4.效果
