uniapp 单选按钮例子

以下是一个uniapp的单选按钮例子：

<template>
  <view>
    <text>选择您的性别:</text>
    <radio-group v-model="gender">
      <radio value="男">男</radio>
      <radio value="女">女</radio>
    </radio-group>
    <text>您选择的性别是: {{gender}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
    };
  },
};
</script>

在这个例子中，我们使用了`radio-group`和`radio`组件来创建单选按钮。`radio-group`组件用于包裹所有的`radio`组件，并且用`v-model`绑定一个变量，以便在选择`radio`时自动更新这个变量的值。`radio`组件用于表示每一个单选按钮，它的`value`属性表示这个按钮的值。

在我们的例子中，我们创建了两个`radio`组件，分别表示男和女。当用户选择其中的一个按钮时，`gender`变量的值会自动更新。我们还在页面中展示了用户选择的性别。

相关问题

uniapp 实现单选选择框

### 如何在 UniApp 中创建单选按钮组件

为了实现在 UniApp 中创建单选按钮的功能，可以利用 Vue.js 提供的数据绑定特性以及 `v-for` 指令来循环渲染多个单选框。通过定义一个数组用于存储各个选项的信息，并设置一个变量用来追踪当前被选中的项。

下面是一个简单的例子，展示了如何构建这样的单选按钮组：

<template>
  <view class="radio-group">
    <!-- 使用 v-for 循环生成每一个 radio -->
    <label v-for="(item, index) in radioData" :key="index">
      <radio 
        :value="item.value"
        color="#0A98D5"
        :checked="curIndex === index"
        @click="handleClick(index)"
      />
      {{ item.label }}
    </label>
  </view>
</template>

<script>
export default {
  data() {
    return {
      curIndex: null,
      radioData: [
        { label: 'Option A', value: 'a' },
        { label: 'Option B', value: 'b' },
        { label: 'Option C', value: 'c' }
      ]
    };
  },
  methods: {
    handleClick(index) {
      this.curIndex = index;
    }
  }
};
</script>

<style scoped>
.radio-group label {
  margin-right: 20px;
}
</style>

此代码片段实现了基本的单选逻辑[^2]。每当用户点击某个单选框时，都会触发相应的事件处理器 (`@click`) 并更新视图状态(`this.curIndex`)以反映最新的选择情况。

uniapp好看的单选框尺寸

### 实现美观的单选框样式及其尺寸调整

在 UniApp 中实现美观的单选框样式以及对其进行尺寸调整，可以通过自定义 CSS 和使用框架内置组件相结合的方式完成。对于单选框样式的美化，通常的做法是隐藏默认的 `<radio>` 输入控件，并通过伪类和背景图片来创建更加吸引人的视觉效果。

#### 自定义 Radio 组件外观

为了达到更好的用户体验并确保跨平台一致性，可以采用如下方式：

1. **HTML 结构**

首先构建基础 HTML 结构，在模板部分添加 radio 组合标签，同时给定特定 class 名以便后续样式化操作。

   <!-- uni-app 页面中的 wxml -->
   <view class="custom-radio-group">
     <label v-for="(item, index) in options" :key="index" class="custom-label">
       <text>{{ item.label }}</text>
       <radio :value="item.value" color="#0A76D8"/>
     </label>
   </view>

2. **CSS 样式定制**

接下来利用 CSS 对上述结构进行美化处理，这里展示了一个简单的例子，可以根据实际需求进一步优化设计。

   /* 定义全局变量 */
   :root {
     --primary-color: #0A76D8;
     --radio-size: 24px; /* 设置单选按钮大小 */
   }

   .custom-radio-group {
     display: flex;
     gap: 1em;
   }
   
   .custom-label {
     position: relative;
     cursor: pointer;
     font-size: var(--font-size-base);
   }
   
   .custom-label text {
     margin-right: calc(var(--radio-size)/2); 
   }
   
   .custom-label radio {
     appearance: none;
     width: var(--radio-size);
     height: var(--radio-size);
     border-radius: 50%;
     outline: none;
     background-color: white;
     box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2), 0 0 0 3px transparent;
     transition: all ease-in-out 0.2s;
   }
   
   .custom-label radio:checked::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: calc(var(--radio-size)*0.6);
     height: calc(var(--radio-size)*0.6);
     border-radius: inherit;
     background-color: var(--primary-color);
   }

3. **JavaScript 控制逻辑**

如果涉及到交互行为或状态管理，则可以在 JavaScript 或 Vue.js 方法内编写相应代码片段控制选项的选择与否等功能。

以上方案不仅能够满足基本功能要求，而且提供了良好的视觉反馈机制，使得用户界面更为友好直观[^1]。