uniapp的picker写一个两列的选择

好的，以下是一个两列的picker示例代码： ``` html <template> <view class="container"> <view class="picker-wrap"> <picker :value="value" mode="multiSelector" :range="range" @change="handleChange"> <view class="picker-text">{{text}}</view> </picker> </view> </view> </template> <script> export default { data() { return { value: [0, 0], // 默认值 range: [ ['选项1', '选项2', '选项3'], ['子选项1', '子选项2', '子选项3'] ], text: '请选择' // picker展示的文本 } }, methods: { handleChange(e) { const value = e.detail.value; const text = `${this.range[0][value[0]]} - ${this.range[1][value[1]]}`; this.value = value; this.text = text; } } } </script> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .picker-wrap { width: 300rpx; height: 100rpx; border: 1px solid #ccc; border-radius: 10rpx; overflow: hidden; } .picker-text { display: flex; justify-content: center; align-items: center; height: 100%; color: #333; } </style> ``` 在上面的代码中，我们使用了 `multiSelector` 模式，通过 `range` 定义了两列选项。`value` 用于绑定默认值，`text` 用于展示当前选择的文本。当用户选择时，会触发 `change` 事件，我们在 `handleChange` 方法中更新 `value` 和 `text` 的值，并且将 `text` 展示在 picker 上。

阅读全文