uniapp实现---单选题按钮

���录

一、实现思路

二、实现步骤

        ①view部分展示

        ②JavaScript 内容

        ③css中样式展示

三、效果展示

---

一、实现思路

        使用样式布局控制单选框的位置，这里使用的是原生态uniapp，并没有使用组件。

二、实现步骤

        ①view部分展示

                

您对学校食堂的菜品口味满意吗？不满意一般满意非常满意您对食堂的餐具清洁度满意吗？不满意一般满意非常满意

        ②JavaScript 内容

export default {data() {return {fromdeta: {age: '', // 选中的年级},};},methods: {radioChange(n) {console.log('radioChange', n);}}}

        ③css中样式展示

.radio-group {margin: 16rpx;display: flex;flex-direction: column;}.radio-row {display: flex;}.radio-label {display: flex;align-items: center;margin-bottom: 24rpx;width: 50%;font-size: 28rpx;color: #1A1A1A;}/* 调整单选框与文字之间的距离 */.custom-radio {margin-right: 10rpx;transform: scale(0.7)}.titlea {font-size: 32rpx;color: #1A1A1A;letter-spacing: 2rpx;}

三、效果展示

                可以单选，选中的颜色，可以根据自己的需要调节