uni-app picker

Uni-app 提供了一个内置组件 picker，用于选择器的展示和交互。picker 可以用于选择日期、时间、数字、文字等。以下是一个展示数字选择器的示例：

<template>
  <view>
    <view class="picker">
      <picker mode="selector" :range="range" v-model="index" @change="onChange">
        <view class="picker-item">{{ range[index] }}</view>
      </picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: ['1', '2', '3', '4', '5'],
      index: 0
    }
  },
  methods: {
    onChange(e) {
      console.log('picker change', e.detail.value)
    }
  }
}
</script>

<style>
  .picker {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
  }
  .picker-item {
    font-size: 24px;
    color: #333333;
  }
</style>

在上述示例中，我们使用 picker 组件展示了一个数字选择器，range 属性用于设置选择器的选项，index 属性用于设置当前选中的选项，@change 事件用于监听选项变化并触发回调函数。