H5 switch开关

最新推荐文章于 2021-06-03 04:05:26 发布

liuye066

最新推荐文章于 2021-06-03 04:05:26 发布

阅读量1.3k

点赞数 2

分类专栏： H5 混合开发文章标签： css html flex js

本文链接：https://blog.csdn.net/liuye066/article/details/115897530

版权

H5 同时被 2 个专栏收录

22 篇文章 3 订阅

订阅专栏

混合开发

21 篇文章 1 订阅

订阅专栏

<input type="checkbox" id="switch" class="switch" :checked="fun.value=='true'">

css样式：

/* Switch开关样式 */
/* 必须是input为 checkbox class 添加 switch 才能实现以下效果 */
input[type='checkbox'].switch{
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  transition: border-color .3s, background-color .3s;
}

input[type='checkbox'].switch::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height:1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0,0,2px,#999;
  transition:.4s;
  top: 1px;
  position: absolute;
  left: 2px;
}

input[type='checkbox'].switch:checked {
  background: rgb(19, 206, 102);
}
/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
input[type='checkbox'].switch:checked::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 1px;
}

列表：

    /*list-style-type: none; 去掉无序列表的圆点*/    
    <ul style="list-style-type: none; padding: 0; margin-top: 10px; width: 100%;">
        /*display: flex; flex-wrap: wrap; 使控件不超出屏幕*/
        <li v-for="(fun, index) in attributes" :key="index" style="display: flex; flex-wrap: wrap;">

          /*display: flex; 子元素横向排列*/  
          <div style="height: 85px; border: 1px solid #2c3e50; width: 100%; border-radius:10px; margin-top: 10px; display: flex; padding-left: 15px">

            <img :src="fun.value == 'true'?fun.activeIcon:fun.icon" width="20px" height="20px" style="align-self: center">

            <div style="align-self: center; margin-left: 6px;">{{fun.name}}</div>

            <div style="align-self: center; position: absolute; right: 20px" @click="controlFun(index)">
               /*v-else-if 用v-if控制switch状态，状态改变时有时改变不了*/  
              <input type="checkbox" class="switch" :checked="fun.value=='true'">
<!--              <input type="checkbox" class="switch" v-else-if="fun.value =='false'">-->
            </div>

          </div>

        </li>
      </ul>