微信小程序下拉选择

**微信小程序下拉选择**

在微信小程序中，下拉选择是用户交互的一种常见形式。它可以让用户从一个列表中选择一个选项，这样就可以减少用户的输入量，并且提高了用户体验。

### 一、基本结构下拉选择通常由以下几个部分组成：

* **选择器**:这是一个用于显示当前选择结果的控件。
* **列表**:这是一个包含所有可供选择选项的控件。
* **触发器**:这是一个用于触发列表弹出的控件。

### 二、实现下拉选择要实现下拉选择，我们需要使用微信小程序中的 `picker` 控件。`picker` 控件可以让用户从一个列表中选择一个选项。

####1. 引入 picker 控件首先，我们需要在我们的小程序中引入 `picker` 控件。

html<template>
 <view>
 <!--选择器 -->
 <view class="selector">{{ selector }}</view>

 <!-- 列表 -->
 <picker @change="bindChange" :value="listValue" :range="list">
 <view>{{ list[listValue] }}</view>
 </picker>

 <!-- 触发器 -->
 <button @click="showList">显示列表</button>
 </view>
</template>

<script>
export default {
 data() {
 return {
 selector: '',
 listValue:0,
 list: ['选项1', '选项2', '选项3'],
 };
 },
 methods: {
 bindChange(e) {
 this.selector = e.detail.value;
 this.listValue = e.detail.index;
 },
 showList() {
 // 显示列表 wx.showActionSheet({
 itemList: ['选项1', '选项2', '选项3'],
 success(res) {
 console.log(res.tapIndex);
 },
 });
 },
 },
};
</script>

javascriptbindChange(e) {
 this.selector = e.detail.value;
 this.listValue = e.detail.index;
}