t-picker

Picker 选择器

组件介绍

多列滚动选择器组件，用于选项滚轮选择与结果确认。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="picker-demo">
    <t-picker 
      :columns="3" 
      :rowHeight="50"
      titleKey="name"
      indexKey="id"
      @change="onChange"
      @animationfinish="onAnimationFinish"
    ></t-picker>
  </view>
</template>

<script setup>
function onChange(e) {
  console.log('选择变化:', e);
}

function onAnimationFinish(e) {
  console.log('动画结束:', e);
}
</script>

<style scoped>
.picker-demo {
  padding: 20rpx;
}
</style>

Props

属性名	类型	默认值	说明	可选值
columns	Number	3	列数	-
rowHeight	Number	50	行高	-
titleKey	String	"name"	显示字段的key	-
indexKey	String	"id"	索引字段的key	-

Events

事件名	说明	回调参数
change	选择变化时触发	选择结果
animationfinish	动画结束时触发	-

Methods

方法名	说明	参数	返回值
setData	设置选择器数据	columnIndex: number, data: Array	无
getValue	获取当前选择值	无	选择结果