微信小程序多选框样式如何开发
众所周知，微信最近推出了微信小程序功能，这给我们在使用微信小程序的过程中带来了很多便利。最近有很多微信用户问我微信小程序多选框样式如何开发？下面小编就带你了解一下微信小程序多选框样式如何开发？
如何开发微信小程序的多选框样式？
微信小程序复选框组件替代LXCheckboxGroup组件：
LXCheckboxGroup 复选框
微信小程序多选框样式的开发思路如下：
1. checkboxGroup 包含一个复选框视图组件。
2. 每个复选框都包含一个图标和文本。
3.点击时con和text都会被选中，类似于label
使用时，图标样式会切换状态。在正常和高亮状态下，对应的值被赋给图标的type属性。
4. 每次点击时，复选框的值都会存储在checkedValues数组中。
开发微信小程序多选框样式的步骤如下：
设置布局，微信文字和图标垂直居中，左间距4px，各占一行。
微信布局文件
{{项目.文本}}
样式表
/*整个复选框组容器*/
.lxCheckboxGroup {
宽度：80px；
高度：26 像素；
边距：20px 自动；
}
/*单个复选框容器*/
.lxCheckboxGroup视图{
/*上下间距为4px*/
边距：4px 自动；
}
/*复选框图标*/
.lxCheckboxGroup 图标{
/*文本是用块来描述的，所以它必须向左浮动*/
/*文字微信标签样式*/
.lxCheckboxGroup 文本{
字体大小：14px；
/*20px是左侧按钮的大小，4px是真正的左侧间距*/
左边距：24px；
/*高亮等于图标实现垂直居中*/
高度：20px；
/*文本垂直居中*/
行高：20px；
/*分块布局，否则文字高度无效*/
显示：块；
}
微信js代码
页（{
数据： {
项 [
{值：'美国'，文本：'美国'，类型：'圆圈'}，
{value'CHN', text'中国', type'success_circle'},
{值：'BRA'，文本：'巴西'，类型：'圆圈'}，
{value'JPN', text'Japan', type'circle'},
{值：'ENG'，文本：'UK'，类型：'圆'}，
{值：'TUR'，文本：'法国'，类型：'圆'}，
]
},
绑定复选框：函数（e）{
//绑定点击事件并更改复选框样式为选中或未选中
/*绑定点击事件并更改复选框样式为选中或未选中*/
//获取items中遍历指令的下标值
var index=parseInt(e.currentTarget.dataset.index);
//原始图标状态
var type=this.data.items[index].type;
var items=this.data.items;
if (类型=='圆') {
//未选中时
items[index].type='success_circle';
} 别的{
items[index].type='圆';
}
//写回点击修改的数组
this.setData({
项 项目
});
//遍历获取检查到的值
var checkValues=[];
if (items[i].type=='success_circle') {
checkValues.push(items[i].value);
}
}
//写回数据提交到网络
this.setData({
检查值：检查值
});
}
微信小程序多选框样式如何开发？通过以上内容，您知道微信小程序多选框样式如何开发吗？
