一、 修改小程序radio样式
直接放代码吧,没啥好说的
wxml代码:
<radio-group>
<label wx:for="{{item.spec_value}}" wx:key="index" class="gg_shuxing" data-specval='{{item.id}}' bindtap="getvalue">
<radio value="{{item.id}}" checked="{{false}}" class="gg_radio" />
<view class="gg_gg">{{item.spec_value}}</view>
</label>
</radio-group>
wxss代码:
我用的是class样式,更方便理解,如果要是直接将gg_radio换成radio,同一个页面中如果有两个radio,且想让样式不一样,就会出问题
/* 自定义 radio 样式 */
/* 这一句不加也没事,最好还是加上吧 */
.gg_radio{
width: 38rpx;
}
/* radio 选中框样式 */
.gg_radio .wx-radio-input{
border-radius: 50%;
width: 28rpx;
height: 28rpx;
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
.gg_radio .wx-radio-input.wx-radio-input-checked{
border: none;
background: red;
}
/* 选中后的样式 (可根据设计稿需求自己修改) 对勾大小、背景颜色*/
.gg_radio .wx-radio-input.wx-radio-input-checked::before{
border-radius: 50%;
width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
font-size: 26rpx;
color:#fff;
background: #fe6732;
border-color: #fe6732;
}
js代码:
js你们自己写就行,就是从服务器器获取数据,动态生成就可以了
二、 修改小程序checkbox样式
直接放代码吧,没啥好说的
wxml代码:
<checkbox-group>
<label wx:for="{{item.spec_value}}" wx:key="index" class="gg_shuxing" data-specval='{{item.id}}' bindtap="getvalue">
<checkbox value="{{item.id}}" checked="{{false}}" class="gg_checkbox" />
<view class="gg_gg">{{item.spec_value}}</view>
</label>
</radio-checkbox>
wxss代码:
我用的是class样式,更方便理解,如果要是直接将gg_radio换成radio,同一个页面中如果有两个radio,且想让样式不一样,就会出问题
/* 自定义 radio 样式 */
/* radio 选中框样式 */
.gg_checkbox .wx-checkbox-input{
border-radius: 50%;
width: 28rpx;
height: 28rpx;
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
.gg_checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: none;
background: red;
}
/* 选中后对勾的样式 (可根据设计稿需求自己修改) 对勾大小、背景颜色*/
.gg_checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
border-radius: 50%;
width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
font-size: 26rpx;
color:#fff;
background: #fe6732;
border-color: #fe6732;
}
js代码:
js你们自己写就行,就是从服务器器获取数据,动态生成就可以了