uniapp下拉框select组件如何使用

在uniapp中使用下拉框select组件时，如何绑定数据并实现选项的动态渲染？我在官方文档中看到picker组件，但不确定是否等同于select。另外，如何设置默认选中项，以及获取用户选择的值？希望有具体的代码示例说明。

2 回复

在uniapp中，使用<picker>组件实现下拉选择。设置mode="selector"，绑定range数组作为选项，用@change事件获取选中值。示例：

<picker @change="onChange" :range="options">
  <view>当前选择：{{selected}}</view>
</picker>

JS中定义options数组和onChange方法即可。


在 UniApp 中，下拉框功能通常使用 picker 组件实现，因为 UniApp 没有专门的 select 组件。以下是基本用法和代码示例：

1. 普通选择器（单列）

适用于简单选项选择，如性别、城市等。

代码示例：

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

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

2. 多列选择器

适用于需要同时选择多个关联数据的场景，如省市区选择。

代码示例：

<template>
  <view>
    <picker mode="multiSelector" @change="onMultiChange" @columnchange="onColumnChange" :value="multiIndex" :range="multiArray">
      <view>当前选择：{{ multiArray[0][multiIndex[0]] }} - {{ multiArray[1][multiIndex[1]] }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      multiArray: [
        ['广东', '湖南'],
        ['广州', '深圳', '长沙']
      ],
      multiIndex: [0, 0]
    }
  },
  methods: {
    onMultiChange(e) {
      this.multiIndex = e.detail.value
    },
    onColumnChange(e) {
      // 处理列变化逻辑
    }
  }
}
</script>

3. 时间/日期选择器

使用 mode 属性指定选择器类型。

代码示例：

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

注意事项：

  • range 属性支持数组和对象数组（使用 range-key 指定显示字段）。
  • 样式需自定义，默认无下拉箭头。
  • 在 H5 端部分机型可能有原生 select 表现。

以上是 UniApp 下拉选择的基本实现方式，根据需求选择合适的 picker 模式即可。

回到顶部