微信小程序-普通下拉选择器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
    })
  },