微信小程序多选框样式如何开发 每个独占一行
微信小程序多选框样式如何开发
?我都知道微信最近推出了微信小程序功能，我们在使用微信小程序的过程中给我们带来了很多便捷，最近很多微信用户问我微信小程序多选框样式如何开发?下面小编就带你了解一下微信小程序多选框样式如何开发?
微信小程序多选框样式怎么开发?
微信小程序复选框组件替代方案 LXCheckboxGroup组件：
LXCheckboxGroup复选框
微信小程序多选框样式开发的思路如下：
1、checkboxGroup里包着一个checkbox view组件。
2、每个checkbox里都包含一个icon与text。
3、con与text点击都会选中，类似于label
for的用法，icon样式会切换状态。normal与highlight状态，对应的值赋予icon的type属性。
4、每次点击都会将checkbox的value值存在到checkedValues数组中
微信小程序多选框样式开发的步骤如下：
设置布局，使用微信文字与图标垂直居中，左间距4px，每个独占一行。
微信布局文件
{{item.text}}
样式表
.lxCheckboxGroup {
width: 80px;
height: 26px;
margin:20px auto;
}
.lxCheckboxGroup view {
margin: 4px auto;
}
.lxCheckboxGroup icon {
.lxCheckboxGroup text{
font-size: 14px;
margin-left: 24px;
height: 20px;
line-height: 20px;
display: block;
}
微信js代码
Page({
data: {
items: [
{value: 'USA', text: '美国', type: 'circle'},
{value: 'CHN', text: '中国', type: 'success_circle'},
{value: 'BRA', text: '巴西', type: 'circle'},
{value: 'JPN', text: '日本', type: 'circle'},
{value: 'ENG', text: '英国', type: 'circle'},
{value: 'TUR', text: '法国', type: 'circle'},
]
},
bindCheckbox: function(e) {
//绑定点击事件，将checkbox样式改变为选中与非选中
//拿到下标值，以在items作遍历指示用
var index=parseInt(e.currentTarget.dataset.index);
//原始的icon状态
var type=this.data.items[index].type;
var items=this.data.items;
if (type=='circle') {
//未选中时
items[index].type='success_circle';
} else {
items[index].type='circle';
}
// 写回经点击修改后的数组
this.setData({
items: items
});
// 遍历拿到已经勾选的值
var checkedValues=[];
if (items[i].type=='success_circle') {
checkedValues.push(items[i].value);
}
}
// 写回data，供提交到网络
this.setData({
checkedValues: checkedValues
});
}
微信小程序多选框样式如何开发?通过小编以上的内容，你知道微信小程序多选框样式如何开发了吗?