微信开发小程序 点击下拉框的内容,显示到框里
时间: 2024-03-19 11:46:03 浏览: 116
可以通过以下步骤实现:
1. 在 wxml 文件中,定义一个 picker 组件,设置其 bindchange 事件,例如:
```html
<view>
<picker mode="selector" range="{{selector}}" bindchange="onPickerChange">
<view class="picker">
{{selector[selected]}}
</view>
</picker>
</view>
```
其中,selector 是一个数组,包含下拉框中所有选项的内容,selected 是当前选中的选项的下标。
2. 在对应的 js 文件中,定义 onPickerChange 函数,获取用户选择的选项并设置到 data 中,例如:
```javascript
Page({
data: {
selector: ['选项1', '选项2', '选项3'],
selected: 0, // 默认选中第一个选项
showValue: '', // 显示在框中的选项内容
},
onPickerChange: function(e) {
const index = e.detail.value;
const value = this.data.selector[index];
this.setData({
selected: index,
showValue: value,
})
},
})
```
其中,e.detail.value 是用户选择的选项的下标,value 是对应的选项内容,showValue 是用于显示在框中的选项内容。
3. 在 wxml 文件中,使用 data 中的 showValue 变量展示选项内容,例如:
```html
<view>
<picker mode="selector" range="{{selector}}" bindchange="onPickerChange">
<view class="picker">
{{showValue}}
</view>
</picker>
</view>
```
这样,用户选择下拉框中的选项后,选项内容会显示在框中。
阅读全文