帮我写一个uniapp页面,里边一个多列picker
时间: 2023-08-25 11:48:45 浏览: 101
当然可以帮你写一个uniapp页面,里面包含一个多列picker。下面是一个简单的示例代码:
```html
<template>
<view>
<picker :value="pickerValue" mode="multiSelector" @change="onPickerChange">
<view class="picker-content">{{ pickerText }}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
pickerValue: [0, 0], // 选择器当前选中的值
pickerData: [
['选项1', '选项2', '选项3'], // 第一列的选项
['选项A', '选项B', '选项C'] // 第二列的选项
]
};
},
computed: {
pickerText() {
const [column1, column2] = this.pickerValue;
return `${this.pickerData[0][column1]} - ${this.pickerData[1][column2]}`;
}
},
methods: {
onPickerChange(event) {
this.pickerValue = event.mp.detail.value;
}
}
};
</script>
<style scoped>
.picker-content {
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
</style>
```
这个页面使用了uniapp的`picker`组件,设置了`mode`为`multiSelector`,并通过`pickerData`数组提供了多列的选项。当选择器的值发生变化时,会触发`change`事件,并将新的值保存在`pickerValue`中。通过计算属性`pickerText`,可以显示当前选择的文本。你可以根据需要修改选项的内容和样式。希望这个示例对你有所帮助!如果有其他问题,请随时提问。
阅读全文