uniapp 选择框的使用方法

在uniapp中如何使用选择框组件？我想实现一个下拉选择的功能，但不太清楚具体该怎么操作。能否提供一下选择框的基本用法示例，包括如何绑定数据、设置默认选项以及获取用户选择的值？最好能说明一下uniapp自带的选择框和第三方插件的区别。

2 回复

在uniapp中使用<picker>组件实现选择框。例如：

<picker @change="bindPickerChange" :value="index" :range="array">
  <view>当前选择：{{array[index]}}</view>
</picker>

data中定义：

array: ['选项1','选项2'],
index: 0

methods中处理选择事件：

bindPickerChange(e) {
  this.index = e.detail.value
}

在 UniApp 中，选择框主要通过 picker 组件实现，支持多种类型：普通选择器、时间选择器、日期选择器、省市区选择器等。以下是基本使用方法及代码示例。

1. 普通选择器（mode = selector）

用于从预定义选项中选择一项。

<template>
  <view>
    <picker mode="selector" :range="options" @change="onPickerChange">
      <view>当前选择：{{ selectedValue }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedValue: ''
    }
  },
  methods: {
    onPickerChange(e) {
      const index = e.detail.value;
      this.selectedValue = this.options[index];
    }
  }
}
</script>

2. 时间选择器（mode = time）

选择时间（小时和分钟）。

<picker mode="time" @change="onTimeChange">
  <view>选择时间：{{ selectedTime }}</view>
</picker>

data() {
  return {
    selectedTime: ''
  }
},
methods: {
  onTimeChange(e) {
    this.selectedTime = e.detail.value;
  }
}

3. 日期选择器（mode = date）

选择年、月、日。

<picker mode="date" @change="onDateChange">
  <view>选择日期：{{ selectedDate }}</view>
</picker>

data() {
  return {
    selectedDate: ''
  }
},
methods: {
  onDateChange(e) {
    this.selectedDate = e.detail.value;
  }
}

4. 省市区选择器（mode = region）

选择省、市、区。

<picker mode="region" @change="onRegionChange">
  <view>选择地区：{{ selectedRegion.join(' ') }}</view>
</picker>

data() {
  return {
    selectedRegion: []
  }
},
methods: {
  onRegionChange(e) {
    this.selectedRegion = e.detail.value;
  }
}

关键属性说明：

  • mode：选择器类型（selector/time/date/region）。
  • range：普通选择器的选项数组（仅 mode=“selector” 时有效）。
  • @change：选择变化时触发的事件，通过 e.detail.value 获取选中值。

注意事项：

  • 普通选择器的 range 可以是数组或对象数组（通过 range-key 指定显示字段）。
  • 日期选择器可通过 start 和 end 属性限制选择范围。
  • 所有选择器均支持 disabled 属性禁用交互。

根据需求选择合适的 mode，绑定数据和处理事件即可实现功能。

回到顶部