uniapp单项选择器
时间: 2023-09-16 16:08:17 浏览: 119
UniApp 中可以使用 `uni-picker-view` 组件来实现单项选择器。以下是一个简单的示例代码:
```vue
<template>
<view>
<button @click="showPicker">打开选择器</button>
<uni-picker-view v-model="selectedValue" :value-array="options"></uni-picker-view>
</view>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 选中的值
options: ['选项1', '选项2', '选项3'] // 可选的值数组
}
},
methods: {
showPicker() {
uni.showModal({
title: '选择器',
content: `你选择了:${this.selectedValue}`,
showCancel: false
})
}
}
}
</script>
```
在上面的示例中,`uni-picker-view` 组件通过 `v-model` 属性绑定了 `selectedValue`,这样当选择器的值改变时,`selectedValue` 的值也会跟着变化。通过点击按钮可以打开一个模态框,显示当前选择的值。
注意:上述代码仅为示例,实际使用时你可能需要根据自己的需求进行相应的修改和适配。
阅读全文