• 当前标签：单选

程序开发 微信小程序 自定义单选(radio)、复选按钮样式(checkbox)样式

radio /*  重写 radio 样式  */ /* 未选中的 背景样式 */ radio .wx-radio-input{    border-radius: 50%;/* 圆角 */    width: 40rpx;    height: 40rpx; } /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */ radio .wx-radio-input.wx-radio-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */ radio .wx-radio-input.wx-radio-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */    height: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); } checkbox /*  重写 checkbox 样式  */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 背景的宽 */    height: 40rpx; /* 背景的高 */ } /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */ checkbox .wx-checkbox-input.wx-checkbox-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */    height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); }

2018-08-03 10:34:49 1356 0 0
阅读详情

程序开发 Vue和小程序中制作单选、多选点击变色教程

在Vue或者小程序中经常用到单选或者多选点击变色的事件，Vue和小程序都是数据for遍历出来的，不能和普通那样设置点击事件更改样式，按照之前那样会全部都变色了。 在Vue或小程序中利用元素的id的不同来判断给哪个添加样式。 在Vue中 <div id="app">         <h1>Vue中制作单选、多选点击变色教程</h1>         <h2>原文地址：<a href="https://blog.huangliangbo.com/rOdt5">https://blog.huangliangbo.com/rOdt5</a></h2>         <h2>单选</h2>         <ul>             <li v-for="item in phones" :key="item.id" :class="radio == item.id ? 'bgColor':'' " @click="clickRadio(item.id)">{{item.name}}</li>             <div class="clean"></div>         </ul>         <h2>多选</h2>         <ul>             <li v-for="items in phones" :class="Checkbox.includes(items.id) ? 'bgColor':'' " @click="clickCheckbox(items.id)">{{items.name}}</li>             <div class="clean"></div>         </ul>     </div>     <script src="https://cdn.jsdelivr.net/npm/vue"></script>     <script>     var app = new Vue({         el: '#app',         data: {             // 定义一个变量 用于储存id 单选只储存一个使用字符串             radio:'',             // 多选储存多个id 则使用数组             Checkbox:[],             phones:[                 {                     id:1,                     name:'华为',                 },                 {                     id:2,                     name:'荣耀',                 },                 {                     id:3,                     name:'小米',                 },                 {                     id:4,                     name:'魅族',                 },                 {                     id:5,                     name:'OPPO',                 },                 {                     id:6,                     name:'vivo',                 },             ]         },         methods:{             clickRadio:function(e){                 if(this.radio == e){                     // 如果已经点击则取消点击样式                     this.radio = ''                 }                 else{                     // 把点击的元素id放入radio中                     this.radio = e;                 }             },             clickCheckbox:function(e){                 if(this.Checkbox.includes(e)){                     this.Checkbox.splice(this.Checkbox.indexOf(e),1);                 }else{                     // 把点击的元素id放入Checkbox数组中                     this.Checkbox.push(e);                 }             }         }     })     </script> 在小程序中 在小程序中的原理也是和Vue中一样，只是设置数据的方式不一样而已，Vue中直接使用 this.radio = e ,但在小程序中则是 this.setData({     radio:e }) PS: (2018-02-08) 小程序的多选不能这样做，如果点击执行请求的话，则从请求中获取状态码判断是否被选中( {{item.checkbox == 1?'bgColor':''}} ); 如果没有执行请求的话，可以在预设data中的phones数组中添加状态码。 <text wx:for="{{TFtips}}" id='{{item.id}}' wx:key="{{item.id}}" data-index="{{index}}" bindtap='color_green' class="{{item.checked?'bgColor':''}}">{{item.name}}</text> data中的数组 {id:1,name:'华为',checked:false}, js中这样写： color_green:function(e){     // console.log(e.currentTarget.dataset.index)     let index = e.currentTarget.dataset.index;     let phones = this.data.phones     let that = this;     phones[index].checked = !phones[index].checked     this.setData({       phones：phones     })   }, 演示demo

2017-12-12 22:58:20 533 0 0
阅读详情
  • 1
前往
页

公告

由于中文域名续费比较贵，所以域名逐渐转为huangliangbo.com

中文域名访问截止时间2023-12-23


关注公众号

微信公众号：HLB_Blog

海南机动车摇号查询

海南机动车摇号查询

博客小程序

博客小程序

最新评论

站点统计

  • 标签：603个
  • 文章：381篇
  • 页面：3个
  • 评论：364条
  • 分类：5个
  • 最后更新：2020-7-21

标签云

更多