微信小程序多选框样式怎么开发?

　　微信小程序多选框样式怎么开发?作为微信小程序开发者，如果您不知道微信小程序多选框样式怎么开发的话，您就out 了哦，以下是微信小程序多选框样式的开发方法和代码了，赶快学习起来吧。

　　微信小程序多选框样式怎么开发?

　　微信小程序多选框组件替代方案 LXCheckboxGroup组件：

　　LXCheckboxGroup多选框的效果如下图所示：

　　微信小程序多选框样式开发步骤：

　　设置布局，使用小程序文字与图标垂直居中，左间距4px，每个独占一行。

　　布局微信小程序文件

　　样式表

　　/*整个复选框组容器*/

　　.lxCheckboxGroup {

　　width: 80px;

　　height: 26px;

　　margin:20px auto;

　　}

　　/*单个复选框容器*/

　　.lxCheckboxGroup view {

　　/*上下间距4px*/

　　margin: 4px auto;

　　}

　　/*复选框图标*/

　　.lxCheckboxGroup icon {

　　/*text用block描述，所以要左浮动*/

　　float: left;

　　}

　　/*文字标签样式*/

　　.lxCheckboxGroup text{

　　font-size: 14px;

　　/*20px是左按钮的大小，4px是真实的左间距*/

　　margin-left: 24px;

　　/*高亮与icon相等，实现垂直居中*/

　　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样式改变为选中与非选中

　　console.log('s' + e.currentTarget.dataset.value);

　　}

　　})

　　响应点击事件

　　利用e.currentTarget.dataset.index传checkbox的index值，作点选与非点选操作，并将已选的values值单独存到数组checkedValues中，供返回提交等操作。

　　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 = [];

　　for (var i = 0; i < items.length; i++) {

　　if (items[i].type == 'success_circle') {

　　checkedValues.push(items[i].value);

　　}

　　}

　　// 写回data，供提交到网络

　　this.setData({

　　checkedValues: checkedValues

　　});

　　}

　　微信小程序多选框样式的方法和需要的微信小程序代码已经全部整理出来了，以上内容供微信小程序开发者参考哦，大家请多关注微小乔。如果您要开发微信小程序多选框样式，可以参考以上的内容。

相关推荐：

如何实现小程序下拉框组件编辑？

微信小程序下拉框开发代码

微信小程序地区下拉框怎么制作?