⼩程序踩坑之⼀【weui-wxss-master单选按钮图标修改思路】
⼩程序原⽣所带的weui框架做⼩程序UI实在太⽅便了，但是他的⼀些细微变化也是让开发中碰到不少头疼的问题
⼀直以来单选多选的美化都是设计师重点表达的地⽅之⼀
⽽weui-wxss-master中的单选多选样式⼜写的与众不同，不同与常规的weui添加after伪类来显⽰不同，他是通过type="success_no_circle"来实现的，所以⽆论怎么更改icon或
icon的after或befor都⽆效果
这⾥想到⼀个变通的⽅法先给icon添加⼀个外层容器，给该容器添加背景图⽚来实现在不选中状态的UI样式，再给icon添加⼀个背景图⽚，同时控制 icon的显⽰隐藏来达到图标
切换的效果，
这⾥额外说下，在⼩程序中，背景图⽚是不许直接引⽤项⽬中的图⽚，否则会直接报错，
可以直接引⽤⼀个带http的绝对地址图⽚，或者转化成bese64来实现【图⽚在线转换64，tool.css-js/base64.html】
先上原始UI
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
<radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
<view class="weui-cell__bd">{{item.name}}</view>
<view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
<icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
</view>
</label>
</radio-group>
改良后的UI
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
<radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
<view class="weui-cell__bd">
<view>{{item.name}}<text>{{item.time}}</text></view>
<view class='text'>{{}}</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-radio">
<view class='price'>{{item.price}}</view>
<view class='ck'><icon class="weui-icon-radio" type="success_no_circle-1" size="16" wx:if="{{item.checked}}"></icon></view>
</view>
</label>
</radio-group>
data: {
radioItems: [
{ name: '标准洗', time:'30分钟',text: '30分钟', price:'￥5', value: '0', checked: true},
{ name: '单脱洗', time: '30分钟', text: '30分钟', price: '￥5', value: '1' },
{ name: '快洗', time: '30分钟',text: '30分钟', price: '￥5',value: '2' },
{ name: '深层洗', time: '30分钟',text: '30分钟', price: '￥5', value: '3' },
]
}
.weui-cell__ft .ck{
width: 20px;
height: 20px;
padding: 0;
padding-top: -3px;
vertical-align: middle;
display: inline-block;
background-size: 100% auto;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBh }
.weui-cell__ft_in-radio .weui-icon-radio{
width: 20px;
height: 20px;
vbs小程序代码大全margin: 0;
padding: 0;
vertical-align: top;
background-size: 100% auto;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHB }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。