微信小程序修改 radio-group 默认样式

时间：2020-03-06 09:58:46 阅读：385 评论：0 收藏：0 [点我收藏+]

技术分享图片

wxss 文件：

/* 重写 radio 样式 */

/* 未选中的背景样式 */

radio .wx-radio-input{

border-radius: 50%;/* 圆角 */

width: 40rpx;

height: 40rpx;

border: none;

background: none;

position: absolute;

right: 0rpx;

}

/* 选中后的背景样式（红色背景无边框可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked{

border: none !important;

background: none !important;

position: absolute;

right: 0rpx;

}

.attr_value {

position:relative;

margin: 0 20rpx;

}

/* 选中后的对勾样式（白色对勾可根据UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked::before{

line-height: 40rpx;

text-align: center;

font-size:38rpx; /* 对勾大小 30rpx */

color:red; /* 对勾颜色白色 */

background: transparent;

transform:translate(-50%, -50%) scale(1);

-webkit-transform:translate(-50%, -50%) scale(1);

}

.radio-group {

background: #fff;

}

.radio {

display: block;

border-top: 1px solid #ddd;

padding: 10rpx;

}

.radio:first-child {

border:none;

}

.section_gap {

line-height: 80rpx;

}

wxml文件：

<view class=‘notice‘>请选择你在使用中所遇到的问题</view>

<radio-group class="radio-group" bindchange="radioChange">

<view>{{item.value}}</view>

</radio>

</view>

</radio-group>

</view>

js文件：

data: {

items: [

{ name: ‘功能不全‘, value: ‘功能不全‘ },

{ name: ‘比较难用‘, value: ‘比较难用‘ },

{ name: ‘界面错位‘, value: ‘界面错位‘ },

{ name: ‘页面加载很慢‘, value: ‘页面加载很慢‘ },

{ name: ‘无法打开小程序‘, value: ‘无法打开小程序‘ },

{ name: ‘闪退/卡顿/黑屏白屏‘, value: ‘闪退/卡顿/黑屏白屏‘ },

{ name: ‘其他‘, value: ‘其他‘ },

]

// 选择方法

radioChange: function (e) {

console.log(‘radio发生change事件，携带value值为：‘, e.detail.value)

微信小程序修改 radio-group 默认样式

原文：https://www.cnblogs.com/823-/p/12424827.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

微信小程序 修改 radio-group 默认样式

微信小程序修改 radio-group 默认样式