微信小程序-普通下拉选择器picker

最新推荐文章于 2025-10-30 15:41:14 发布

原创最新推荐文章于 2025-10-30 15:41:14 发布 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #选择器 #picker

微信开发专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中使用picker组件实现下拉选择功能，包括从接口获取数据并显示，以及如何绑定事件处理选择变化。通过具体代码示例，读者可以快速掌握picker组件的使用方法。

需求：从接口获取数据，数据为json，需要实现如下所示的下拉选择

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

首先在page/index/index.js中添加定义初始数据：

从接口请求数据：

根据文档视图代码如下：

<view class="c-minheight wx-view_jJ3eba" >
    <view class="section">
        <view class="section__title">校区</view>
         <picker bindchange="bindPickerChange" value="{{index}}"  range="{{school}}">
             <view class="picker">
                学校：{{school[index].name}}
             </view>
         </picker>
    </view>
</view>

得到如下效果：

修改代码：

<view class="c-minheight wx-view_jJ3eba" >
    <view class="section">
        <view class="section__title">校区</view>
        <picker bindchange="bindPickerChange" value="" range-key="{{'school_name'}}" range="{{school}}">
            <view class="picker">
                学校：{{school[index].name}}
            </view>
         </picker>
    </view>
 </view>

实现效果：

绑定事件：

bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },