<view class="container">
<view>
<text>选择器的值: {{pickerValue}}</text>
</view>
<picker mode="selector" range="{{pickerOptions}}" bindchange="pickerChange">
<view class="picker-inner">
{{pickerOptions[pickerIndex]}}
</view>
</picker>
</view>
.container {
margin: 20px;
}
.picker-inner {
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
}
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
});
}
});