uniapp 自定义按钮单选

可以通过以下步骤实现 uniapp 自定义按钮的单选功能：

1. 在页面中定义一个变量 selectedBtn，用于保存当前选中按钮的索引值。

2. 为每个按钮绑定点击事件，并将按钮的索引值作为参数传递给事件处理函数。

3. 在事件处理函数中，将 selectedBtn 更新为当前点击按钮的索引值，同时更新每个按钮的选中状态。

以下是示例代码：

<template>
  <view>
    <button v-for="(btn, index) in btnList" :key="index" :class="{selected: selectedBtn === index}" @click="handleClick(index)">{{ btn }}</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        btnList: ['按钮1', '按钮2', '按钮3'],
        selectedBtn: -1,
      }
    },
    methods: {
      handleClick(index) {
        this.selectedBtn = index;
      }
    }
  }
</script>
<style>
  .selected {
    background-color: #ccc;
  }
</style>

相关问题

picker组件单项选择自定义按钮名称

在UniApp的picker组件中，如果你想要定制单项选择的每个选项的显示文本，包括自定义按钮名称，可以利用`label_slots`属性。这允许你在每个选项上添加自定义的标签。

下面是一个例子，展示了如何将单选picker的选项和按钮名改为“确认”和“取消”：

<picker type="selector" value-key="value" label-in-value bindchange="onChange" :label-slots="{ custom: ['确认', '取消'] }">
  <item value="0">选项A</item>
  <item value="1">选项B</item>
  <!-- ...更多选项... -->
</picker>

在这个例子中，`type="selector"` 表示这是一个单选选择器，`label-in-value` 表示选项值会包含在显示文本中，而`bindchange="onChange"` 则绑定了事件处理函数。

`label-slots="{ custom: ['确认', '取消'] }"` 这部分定义了一个名为 `custom` 的槽，它会替代默认的选项标题。现在，当用户点击选择器时，将会显示 "确认" 或 "取消" 而不是原始的选项名称。

uniapp的radio

UniApp 是一套由腾讯云开发的跨平台框架，它允许开发者使用一套代码构建原生应用，同时支持iOS、Android、Web等平台。在 UniApp 中，Radio 组件是一个用于创建单选按钮的控件，用户可以选择其中的一项内容。

**UniApp Radio 组件介绍：**
1. **基本用法：** Radio 组件通常包含一个或多个 RadioItem（单选项），每个 RadioItem 都有一个值和一个描述性的标签。选择其中一个 RadioItem 时，对应的值会被设置为当前组件的值属性。

<view>
  <radio v-model="radioValue" @change="handleChange">
    <radio-item value="option1">选项1</radio-item>
    <radio-item value="option2">选项2</radio-item>
  </radio>
  <text>{{ radioValue }}</text>
</view>

这里，`v-model` 指定数据绑定，`handleChange` 是当选择改变时触发的回调函数。

2. **动态渲染：** 你可以根据数据动态生成 RadioItem，这样可以根据需要轻松地添加或移除选项。

3. **样式控制：** UniApp 提供了 CSS 样式控制，你可以自定义 Radio 和 RadioItem 的外观，如颜色、大小等。