wx小程序picker 数据为数组对象

文章目录

    • 文章参考
    • 案例

文章参考

  1. picker 组件

案例

<picker value="{
      {placesIndex}}" bindchange="placesPickerChange" range="{
      {places}}" range-key="regionName">
	<view class="picker">
		{
    {places[placesIndex]['regionName']}}
	view>
picker>

range-key: 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

Page({
     
  /**
   * 页面的初始数据
   */
  data: {
     
    places: [{
     
        "regionName": "总园区",
        "id": "1"
      },
      {
     
        "regionName": "一园区",
        "id": "2"
      },
      {
     
        "regionName": "二园区",
        "id": "3"
      },
      {
     
        "regionName": "三园区",
        "id": "4"
      },
      {
     
        "regionName": "四园区",
        "id": "5"
      }
    ],
    placesIndex: 0
  },
  // 选择区域
  placesPickerChange: function(eventObj) {
     
    var selectIndex = eventObj.detail.value;
    this.setData({
     
      "placesIndex":selectIndex
    })
    console.log(eventObj);
  },
})

你可能感兴趣的:(微信小程序,uni-app,hbuildx)