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});
}
})