uniapp的picker多列选择器

在Uniapp中，可以使用picker组件实现多列选择器的功能。你可以使用以下代码作为示例:

<template>
  <view>
    <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
      <view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],
      index: 2,
    };
  },
  methods: {
    bindPickerChange: function(e) {
      this.index = e.detail.value;
    }
  }
};
</script>

在上述代码中，`array`是一个包含多个选项的数组，每个选项都有一个`name`属性表示选项的名称。`index`是用来绑定picker选择的索引值。当picker选择发生变化时，会调用`bindPickerChange`方法来更新`index`的值，从而实现多列选择器的功能。

另外，Uniapp还提供了其他类型的选择器，比如时间选择器和日期选择器。你可以使用以下代码作为示例:

<template>
  <view>
    <picker mode="time" :value="time" :start="minTime" :end="maxTime" @change="bindTimeChange">
      <view style="background-color: white;">{{ time }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: '12:01',
      minTime: '09:01',
      maxTime: '21:01'
    };
  },
  methods: {
    bindTimeChange: function(e) {
      this.time = e.detail.value;
    }
  }
};
</script>

上述代码中，可以通过设置`mode`为"time"来创建时间选择器。可以使用`value`属性设置默认选中的时间，`start`属性和`end`属性分别设置可选择的时间范围。当时间选择发生变化时，会调用`bindTimeChange`方法来更新`time`的值。

同样地，你也可以使用以下代码来创建日期选择器:

<template>
  <view>
    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
      <view style="background-color: #07C160;">{{ date }}</view>
    </picker>
  </view>
</template>

<script>
function getDate(type) {
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === 'start') {
    year = year - 10;
  } else if (type === 'end') {
    year = year + 10;
  }

  month = month > 9 ? month : '0' + month;
  day = day > 9 ? day : '0' + day;

  return `${year}-${month}-${day}`;
}

export default {
  data() {
    return {
      date: getDate('format'),
      startDate: getDate('start'),
      endDate: getDate('end'),
    };
  },
  methods: {
    bindDateChange: function(e) {
      this.date = e.detail.value;
    }
  }
};
</script>

在上述代码中，可以通过设置`mode`为"date"来创建日期选择器。可以使用`value`属性设置默认选中的日期，`start`属性和`end`属性分别设置可选择的日期范围。当日期选择发生变化时，会调用`bindDateChange`方法来更新`date`的值。