java switch小程序,跳坑《一百四十七》switch开关选择器使用及自定义说明

switch之宽高+携带value

作者：夏；

本文涉及的主要组件有：form、checkbox及checkbox-group;先看一下官方的：

switch组件可以说是微信滑动按钮的标识了，有点经典;

1.jpg (22.68 KB, 下载次数: 84)

2017-3-21 18:37 上传自带属性：

checked: 选中为true反之false;

type: switch为滑动按钮样式，checkbox为复选框样式(与组件checkbox有点像，一会儿说区别)

bindchange: checked的值改变就触发此事件(点击按钮checked值就变，truefalse来回切换)聊聊蛋疼的事儿吧：

1、宽高不可修改

2、没有value属性

3、form提交的时候永远携带的是自身的checked值(有毛用?)

4、假设服务端返回数据如下图，那么如何携带id进行回传呢：

[AppleScript] 纯文本查看 复制代码btnArray : [//定义假数据

{id:"10",checked:false},

{id:"20",checked:true},

{id:"30",checked:false},

{id:"40",checked:true},

{id:"50",checked:false}

]

那么既然是这样的话，我也只好那样了，你走你的阳光道，我过我的独木桥……在见证奇迹之前，还需要介绍麾下一员大将：

2.jpg (28.66 KB, 下载次数: 82)

2017-3-21 18:37 上传自带属性：

1、value：(哇！看！有value！嘘……)可存储要携带的id等

2、disabled：是否禁用checkbox

3、checked： 选中为true反之false

switch组件type为checkbox时，与组件最大的区别——value；见证奇迹的时刻：注：

1、可修改wxss中参数值来调整按钮大小

2、细细看一下js代码有助于控制层于视图层数据绑定的理解

3、单个按钮与组群按钮是不一样的另：

代码里附着wx:for、wx:key、style、三元运算、formsubmit、组件checkbox-group等基础用法

3.gif (51.23 KB, 下载次数: 85)

2017-3-21 18:37 上传wxml代码：

[AppleScript] 纯文本查看 复制代码

数据展示：

id:{{item.id}}===>{{item.checked}}

手写按钮：

id=>{{item.id}}:

注：这里为了效果看得清楚并没有隐藏掉checkbox

提交

选中的值为：{{checked}}

switch按钮：

wxss代码：

[AppleScript] 纯文本查看 复制代码page{

padding: 50rpx;

}

.datashow{

line-height: 60rpx;

}

.showBtn{

font-size: 30rpx;

text-align: left;

background-color: green;

color: #fff;

}

.notice{

display: block;

font-size: 30rpx;

background-color: red;

color: #fff;

padding: 10rpx;

margin-top:20rpx;

}

.btnOutside{

display: inline-block;

width:90rpx;

height: 50rpx;

background-color: #fff;

border-radius: 25rpx;

border:2rpx solid #D0D0D0;

box-sizing: border-box;

position: relative;

animation:leftOut 0.2s linear;

}

.btnInside{

width:48rpx;

height: 48rpx;

background-color: #fff;

border-radius: 50%;

border:2rpx solid #D0D0D0;

box-sizing: border-box;

position: absolute;

top: 0;

left: -2rpx;

animation:leftIn 0.2s linear;

}

.rightOut .btnInside{

border:2rpx solid #04BE02;

left:40rpx;

animation:rightIn 0.2s linear;

}

.rightOut{

background-color: #04BE02;

animation:rightOut 0.2s linear;

}

@keyframes rightIn{

from{border:2rpx solid #D0D0D0;

left:-2rpx;}

to{border:2rpx solid #04BE02;

left:40rpx;}

}

@keyframes leftIn{

from{border:2rpx solid #04BE02;

left:40rpx;}

to{border:2rpx solid #D0D0D0;

left:-2rpx;}

}

@keyframes rightOut{

from{background-color: #fff;}

to{background-color: #04BE02;}

}

@keyframes leftOut{

from{background-color: #04BE02;}

to{background-color: #fff;}

}

js代码：

[AppleScript] 纯文本查看 复制代码Page({

data:{

btnArray : [//定义假数据

{id:"10",checked:false},

{id:"20",checked:true},

{id:"30",checked:false},

{id:"40",checked:true},

{id:"50",checked:false}

],

checked:''//定义选中字段

},

checkChange:function(e){

let index = e.currentTarget.dataset.id;//获取for循环中当条的ID

this.data.btnArray[index].checked = !this.data.btnArray[index].checked;//控制层允许修改data里面的数组或对象

this.setData({

btnArray:this.data.btnArray//修改完之后必须再次setData，避免控制层与视图层数据不一致

})

},

formSubmit: function(e) {

let checked = e.detail.value.checkbox.toString();//把选中值的数组转成字符串

this.setData({checked:checked});

}

})