Uni-App Picker 使用指南：点击事件触发选项数据改变

在 uni-app 中，可以使用<picker>组件来实现选择器的功能。<picker>组件的用法如下：

在<template>中使用<picker>组件，并绑定需要展示的数据和选中的索引等属性。例如：

<template>
  <view>
    <picker mode='selector' :range='{{ array }}' :value='{{ index }}' @change='bindPickerChange'>
      <view class='picker'>
        当前选择：{{ array[index] }}
      </view>
    </picker>
  </view>
</template>

在<script>中定义数据和事件处理函数。例如：

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

其中，mode属性指定选择器的模式，可以是selector（单列选择器），multiSelector（多列选择器），time（时间选择器），date（日期选择器），region（地区选择器）等。

在打开<picker>之前，可以通过其他的点击事件来改变需要展示的数据，从而实现其他的交互效果。例如，可以在点击按钮时改变选择器的选项数据：

<template>
  <view>
    <button @tap='changePickerData'>改变选项数据</button>
    <picker mode='selector' :range='{{ array }}' :value='{{ index }}' @change='bindPickerChange'>
      <view class='picker'>
        当前选择：{{ array[index] }}
      </view>
    </picker>
  </view>
</template>

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

这样，在点击按钮时，选择器的选项数据会发生改变。