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