uniapp picker-view组件如何使用

在uniapp中使用picker-view组件时遇到了问题，想请教大家几个点：

  1. picker-view的基本用法是怎样的？需要绑定哪些必要属性？
  2. 如何动态设置picker-view的选项数据？
  3. picker-view的change事件获取到的值具体是什么格式？
  4. 在多列选择器情况下，如何实现联动效果？
  5. 有没有完整的示例代码可以参考？
2 回复

uniapp的picker-view组件用于创建自定义选择器。步骤如下：

  1. 在template中添加picker-view组件
  2. 设置value属性绑定当前选中项
  3. 监听@change事件获取选择结果
  4. 内部使用picker-view-column定义列
  5. 每列用view标签填充选项内容

示例：

<picker-view :value="value" [@change](/user/change)="onChange">
  <picker-view-column>
    <view v-for="item in list">{{item}}</view>
  </picker-view-column>
</picker-view>

在 UniApp 中，picker-view 组件用于创建自定义滚动选择器，支持多列选择。以下是基本使用方法：

基本结构

在页面或组件中，使用 picker-view 和 picker-view-column 定义选择器：

<template>
  <view>
    <picker-view :value="value" [@change](/user/change)="onChange">
      <picker-view-column>
        <view v-for="item in years" :key="item">{{ item }}年</view>
      </picker-view-column>
      <picker-view-column>
        <view v-for="item in months" :key="item">{{ item }}月</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

核心属性与方法

  1. value：数组类型，表示各列选中的索引（从 0 开始）。
  2. @change：选择变化时触发的事件，通过 event.detail.value 获取当前各列选中索引。

示例代码

<script>
export default {
  data() {
    return {
      years: [2020, 2021, 2022, 2023],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      value: [0, 0] // 默认选中第一项
    }
  },
  methods: {
    onChange(e) {
      this.value = e.detail.value
      console.log('选中年份:', this.years[this.value[0]])
      console.log('选中月份:', this.months[this.value[1]])
    }
  }
}
</script>

样式调整

可通过 CSS 设置选择器高度和外观：

picker-view {
  width: 100%;
  height: 300rpx;
}

注意事项

  • 每列需用 picker-view-column 包裹内容。
  • 内容可以是任意组件，但通常用 view 展示文本。
  • 数据变化需通过修改 value 索引实现联动效果。

通过以上步骤即可快速实现自定义选择器，适用于日期、地址等复杂选择场景。

回到顶部