Picker 选择器

WXML 文件中

<view class="container">
  <view>
    <text>选择器的值: {{pickerValue}}</text>
  </view>
  <picker mode="selector" range="{{pickerOptions}}" bindchange="pickerChange">
    <view class="picker-inner">
      {{pickerOptions[pickerIndex]}}
    </view>
  </picker>
</view>

WXSS 文件中

.container {
  margin: 20px;
}

.picker-inner {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
}

js文件中

Page({
  data: {
    pickerOptions: ['选项1', '选项2', '选项3'],
    pickerIndex: 0,
    pickerValue: ''
  },
  pickerChange: function (e) {
    var index = e.detail.value;
    var value = this.data.pickerOptions[index];
    this.setData({
      pickerIndex: index,
      pickerValue: value
    });
  }
});