uni-app 滚筒式选择器

在uni-app中实现滚筒式选择器（Picker）可以使用uni-app自带的组件picker。picker组件是一个原生选择器，它支持普通选择器、多列选择器、时间选择器和日期选择器等多种模式。下面是一个简单的滚筒式选择器示例代码，展示如何在uni-app中使用picker组件。

1. 在页面的<template>中定义Picker组件

<template>
  <view class="container">
    <view class="picker-view">
      <picker mode="selector" :range="array" @change="bindPickerChange">
        <view class="picker">
          {{array[index]}}
        </view>
      </picker>
    </view>
    <button @click="showPicker">选择</button>
  </view>
</template>

2. 在页面的<script>中定义数据和逻辑

<script>
export default {
  data() {
    return {
      array: ['苹果', '香蕉', '橙子', '西瓜', '葡萄'], // 选项数组
      index: 0 // 当前选择器的索引
    };
  },
  methods: {
    bindPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e.mp.detail.value);
      this.index = e.mp.detail.value; // 更新当前选择器的索引
    },
    showPicker() {
      uni.showActionSheet({
        itemList: ['从列表选择'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.showPickerModal();
          }
        }
      });
    },
    showPickerModal() {
      uni.showPicker({
        range: this.array,
        value: this.index,
        success: (res) => {
          console.log('res: ', res.value);
          this.index = res.value; // 更新当前选择器的索引
        }
      });
    }
  }
};
</script>

3. 在页面的<style>中定义样式

<style scoped>
.container {
  padding: 20px;
}
.picker-view {
  margin: 20px 0;
}
.picker {
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  text-align: center;
}
button {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

说明

1. 在<template>中，picker组件的range属性定义了选择器的选项数组，@change事件用于监听选择器值的变化。
2. 在<script>中，data定义了选项数组和当前选择器的索引，methods中定义了选择器的相关逻辑。
3. 在<style>中，定义了简单的样式来美化选择器及其按钮。

以上代码展示了如何在uni-app中实现一个简单的滚筒式选择器，用户点击按钮后会显示选择器，选择完成后会自动更新显示的内容。