uniapp 单选按钮例子

### 实现 UniApp 中美观单选框的方法 在 UniApp 开发中，可以通过多种方式实现美观的单选框。以下是基于 CSS 和第三方组件库的具体实现方案。 #### 方法一：使用纯 CSS 自定义样式 通过自定义 CSS 样式可以轻松美化单选框。以下是一个简单的示例： ```html <template> <view class="custom-radio-group"> <label v-for="(option, index) in options" :key="index" class="custom-radio-item"> <input type="radio" name="group" class="custom-radio-input" /> <span class="custom-radio-label">{{ option }}</span> </label> </view> </template> <style scoped> .custom-radio-group { display: flex; } .custom-radio-item { position: relative; margin-right: 20px; } .custom-radio-input { appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; outline: none; cursor: pointer; vertical-align: middle; } .custom-radio-input:checked { background-color: blue; border-color: blue; } .custom-radio-input:checked::after { content: ""; display: block; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background-color: white; } </style> ``` 此代码片段展示了如何利用 `appearance` 属性隐藏默认的单选框外观，并通过伪元素和背景颜色创建一个新的视觉效果[^2]。 --- #### 方法二：借助 FirstUI 组件库 FirstUI 是一款专为 uni-app 设计的轻量级移动组件库，提供了丰富的内置组件支持，其中包括经过优化设计的单选框组件。以下是具体实现步骤： 1. **安装并引入 FirstUI** 下载 FirstUI 并将其解压至项目的 `components/firstui/` 路径下[^3]。 2. **配置全局注册或局部注册** 如果需要在整个应用范围内使用该组件，则可以在 `main.js` 文件中完成全局注册；如果仅限于某个页面，则可以直接导入并声明。 3. **使用 RadioGroup 和 RadioButton** 使用 `<fui-radio-group>` 及其子项 `<fui-radio-button>` 来构建一组优雅的单选项布局。 ```html <template> <view> <fui-radio-group @change="handleChange"> <fui-radio-button value="Option A">选项A</fui-radio-button> <fui-radio-button value="Option B">选项B</fui-radio-button> <fui-radio-button value="Option C">选项C</fui-radio-button> </fui-radio-group> </view> </template> <script> export default { methods: { handleChange(e) { console.log("当前选中的值:", e.detail.value); }, }, }; </script> ``` 上述代码实现了带有交互反馈功能的单选组结构，其中每个按钮都具备独立的状态切换逻辑以及事件监听机制。 --- #### 总结 无论是采用原生 HTML/CSS 手动定制还是依赖成熟的第三方框架来快速搭建界面，都可以满足不同场景下的需求。对于追求极致性能的小型项目来说，前者可能更为合适；而对于大型复杂业务系统而言，则推荐后者以减少重复劳动成本并提高开发效率。

<think>好的，我现在需要在UniApp中实现一个带单选按钮的列表组件。根据用户提供的引用资料，我需要综合这些信息来找出解决方案。首先，用户提到的三个引用都是关于UniApp中的单选组件实现，但具体方法可能有所不同。 引用[3]提到在H5中实现列表单选的方法是点击每一项时设置选中状态为true，其他项为false，然后通过筛选选出选中的对象。这似乎是通过维护一个状态数组来管理选中状态。而引用[2]中的方法是通过判断某个字段的值（如ibdr_default_device）是否为10来确定是否选中，这可能适用于有默认选中的情况。引用[1]则提到个性化单选组件的生成，可能需要使用Vue组件。 我需要将这些方法结合起来。首先，考虑数据结构。列表中的每一项应该有一个唯一标识，比如id，以及一个是否选中的状态字段，比如selected。当用户点击某一项时，将该项目的selected设置为true，其他项设为false。这可以通过遍历数组来实现，或者使用map方法生成新数组。这样每次点击都会更新数据，触发视图重新渲染。 然后，模板部分需要使用v-for循环渲染列表项，并为每个项绑定点击事件。在点击事件的处理函数中，更新数据的状态。同时，根据selected的值来动态绑定样式类，以显示选中状态，比如改变背景颜色或添加勾选图标。 另外，引用[2]中的checkDefaultItem方法可能用于初始化时设置默认选中的项，比如在组件创建时检查某个字段的值，设置对应的selected状态。这可能是在mounted或created生命周期钩子中处理的。 还需要考虑组件的复用性，是否封装成单独的组件，方便在不同地方调用。引用[1]提到生成源码，可能涉及自定义组件，但用户的问题更偏向于实现方法而不是组件封装。 综合以上，步骤大概是：准备数据、渲染列表、处理点击事件、更新状态、显示选中样式。可能还需要在提交时获取选中的项，可以通过计算属性或遍历数组找到selected为true的项。 需要验证这些步骤是否正确，是否存在遗漏。比如，数据响应式的问题，确保在修改selected时视图能正确更新。另外，性能方面，如果列表项很多，频繁更新数组是否会影响性能？不过通常UniApp处理这种小规模数据应该没问题。 最后，代码示例需要结合这些步骤，展示模板、数据、方法的结构，确保语法正确，比如使用Vue的响应式方法，如this.setData或者直接修改数据（取决于是否使用Vue2或Vue3）。根据引用中的例子，可能使用的是Vue2的语法，比如在methods中定义方法，使用this.items来访问数据。 总结，实现的关键点在于管理选中状态，通过点击事件更新状态，并利用响应式系统刷新视图。同时，参考用户提供的引用资料中的方法，确保实现符合UniApp的最佳实践。</think>### 逐步实现UniApp列表单选组件的方法 #### 1. **数据结构设计** - 列表数据中每个元素需包含唯一标识符（如`id`）和选中状态字段（如`selected`） ```javascript data() { return { items: [ { id: 1, name: '选项A', selected: false }, { id: 2, name: '选项B', selected: false }, { id: 3, name: '选项C', selected: false } ] } } ``` #### 2. **模板渲染** - 使用`v-for`循环渲染列表项 - 动态绑定样式类显示选中状态 ```html <view class="list-item" v-for="item in items" :key="item.id" @click="selectItem(item)"> <text>{{ item.name }}</text> <view class="radio-icon"> <view v-if="item.selected" class="selected-indicator">✓</view> </view> </view> ``` #### 3. **选中逻辑实现** - 点击时更新选中状态 ```javascript methods: { selectItem(selectedItem) { this.items = this.items.map(item => { return { ...item, selected: item.id === selectedItem.id } }) } } ``` #### 4. **获取选中值** - 添加提交按钮获取选中结果 ```html <button @click="getSelectedItem">提交选择</button> ``` ```javascript methods: { getSelectedItem() { const selected = this.items.find(item => item.selected) if (selected) { uni.showToast({ title: `已选择：${selected.name}`, icon: 'none' }) } } } ``` #### 5. **样式优化** ```css .list-item { padding: 20rpx; border-bottom: 1rpx solid #eee; display: flex; justify-content: space-between; align-items: center; } .radio-icon { width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #ccc; } .selected-indicator { color: #007AFF; font-weight: bold; } ``` ### 核心原理说明 1. **状态管理**：通过维护`selected`字段实现单选逻辑，每次点击时重置所有选项状态[^3] 2. **响应式更新**：Vue的响应式系统自动同步数据与视图 3. **唯一标识**：使用`id`字段确保选项的唯一性判断