uniapp点击图标展示下拉框
时间: 2023-07-04 11:22:17 浏览: 225
你可以使用uniapp提供的`<picker>`组件来展示下拉框。你需要在`<picker>`标签中设置`mode`属性为`selector`,并在`<picker>`标签内部添加`<picker-view>`标签来定义下拉框中的选项。具体实现可以参考以下代码示例:
```html
<template>
<view>
<button @tap="showPicker">点击显示下拉框</button>
<picker v-model="selectedValue" :range="range" mode="selector" @change="pickerChange">
<view slot="header">请选择</view>
<view slot="footer">确定</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
range: ['选项1', '选项2', '选项3', '选项4'],
selectedValue: 0
}
},
methods: {
showPicker() {
this.$refs.picker.show()
},
pickerChange(e) {
console.log('选中的值为:', e.detail.value)
}
}
}
</script>
```
在上述代码中,我们通过`<picker>`组件来展示下拉框,并将`mode`属性设置为`selector`,表示选择器模式。在`<picker>`标签内部,我们使用`<picker-view>`标签来定义下拉框中的选项,`<picker-view>`标签的`wx:for`属性用来循环渲染选项列表。
在`<picker>`标签中,我们还设置了`slot`插槽,用来自定义下拉框的标题和底部按钮。我们通过`v-model`指令来绑定选中的值,当用户选择某个选项时,会触发`change`事件,我们可以通过`@change`监听事件,获取用户选择的值。