纯CSS模拟安卓滑动开关

先上效果

去网上找了一堆 感觉就这个比较简单 稍微改了改 （然而我并看不懂 瞎j8改的）

1 <label class="switch">
2     <input type="checkbox">
3     <span class="track"></span>
4     <span class="slider"></span>
5 </label>

 1 .switch {
 2     margin: 0 0 0 1px;
 3     padding: 0;
 4     display: inline-block;
 5     position: relative;
 6 }
 7 
 8 .switch .track {
 9     height: 22px;
10     margin: 0;
11     padding: 0;
12     width: 44px;
13     cursor: pointer;
14     vertical-align: top;
15     background-color: #C33;
16     border-radius: 22px;
17     box-shadow: inset 0 0 1px #999;
18     transition: background-color 0.1s;
19 }
20 
21 .switch .slider {
22     position: absolute;
23     left: 0;
24     top: -1px;
25     width: 22px;
26     height: 22px;
27     margin: 0;
28     padding: 0;
29     cursor: pointer;
30     background-color: #fff;
31     border: 1px solid #ccc;
32     border-radius: 22px;
33     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
34     transition: left 0.2s;
35 }
36 
37 .switch .track, .switch .slider {
38     display: inline-block;
39     text-align: center;
40     font-size: 22px;
41     line-height: 22px;
42 }
43 
44 .switch input {
45     display: none;
46 }
47 
48 .switch input:checked ~ .slider {
49     left: 22px;
50 }
51 
52 .switch input:checked ~ .track {
53     background-color: #393;
54 }

最近在玩vue（然而并不会玩）要实现动态刷新数据的功能，vue的数据绑定真好用

然后就是这个开关，有个问题，如果后台操作不成功，页面上开关依然是关闭或者打开了

于是折腾了好久这样弄了一下

1 <label class="switch">
2     <input type="checkbox"
3            :checked="user.status==1?'checked':''"
4            @click="changeStatus(idx, user.uid)"
5            onclick="return false;">
6     <span class="track"></span>
7     <span class="slider"></span>
8 </label>

调用changeStatus的时候顺便重新查询该条数据，然后把之前获取到的列表中该行的数据覆盖一下就可以了

尤其是那个onclick方法 设置成return false;他被点击后就不会打钩（这里是按钮状态发生改变）

但会触发点击事件 除非数据发生改变他才会改变状态