微信小程序多列选择器range-key的使用

1. 什么是微信小程序多列选择器

微信小程序多列选择器是小程序中的一种组件，可以用于用户在多个选项中选择，比如在选择省市区的时候，就可以采用多列选择器。

1.1 组件的使用方法

在小程序的wxml文件中，使用picker-view标签表示多列选择器，picker-view-column表示选择器的每一列选项。其中，bindchange属性可以绑定选择器改变时的事件，用于记录用户的选择结果。

<picker-view bindchange="bindPickerChange">
  <picker-view-column>
    <view>选项1</view>
    <view>选项2</view>
    <view>选项3</view>
  </picker-view-column>
  <picker-view-column>
    <view>选项A</view>
    <view>选项B</view>
    <view>选项C</view>
  </picker-view-column>
</picker-view>

2. range-key的介绍

在picker-view组件中，可以使用range属性表示选择器的选项列表，每个选项包括一个value属性和一个name属性。而range-key属性则表示name属性的键名，若该值为id，则name对应的是选项列表中每一项的id属性。

注：使用range-key属性需要保证选项列表中每一项都有该属性，否则会报错。

2.1 range-key的作用

range-key属性主要用于标识每个选项的名称，同时也可以通过该属性获取到用户选择的选项。

2.2 range-key的使用案例

假设有一个省市区的多级联动选择器，其中省市区的数据都来源于后端接口，我们可以通过range-key属性实现数据的显示和获取。

//JS部分
Page({
  data: {
    provinces: [], //省份列表
    cities: [], //城市列表
    districts: [], //区块列表
    provinceIndex: 0, //省份
    cityIndex: 0, //城市
    districtIndex: 0, //区块
  },
  onLoad: function () {
    //调用后端接口获取省份列表
    wx.request({
      url: 'http://backend.example.com/provinces',
      success: (res) => {
        this.setData({
          provinces: res.data //更新省份列表
        });
      }
    });
  },
  //省份改变时触发
  bindProvinceChange: function (e) {
    const provinceIndex = e.detail.value;
    const provinceId = this.data.provinces[provinceIndex].id; //获取选中的省份ID
    //调用后端接口获取城市列表
    wx.request({
      url: 'http://backend.example.com/cities/' + provinceId,
      success: (res) => {
        this.setData({
          cities: res.data, //更新城市列表
          provinceIndex: provinceIndex, //更新选中的省份
          cityIndex: 0, //重置选中的城市
          districtIndex: 0, //重置选中的区块
        });
      }
    });
  },
  //城市改变时触发
  bindCityChange: function (e) {
    const cityIndex = e.detail.value;
    const cityId = this.data.cities[cityIndex].id; //获取选中的城市ID
    //调用后端接口获取区块列表
    wx.request({
      url: 'http://backend.example.com/districts/' + cityId,
      success: (res) => {
        this.setData({
          districts: res.data, //更新区块列表
          cityIndex: cityIndex, //更新选中的城市
          districtIndex: 0, //重置选中的区块
        });
      }
    });
  },
  //区块改变时触发
  bindDistrictChange: function (e) {
    const districtIndex = e.detail.value;
    this.setData({
      districtIndex: districtIndex //更新选中的区块
    });
  }
});

<!-- WXML部分 -->
<view class="container">
  <view class="form-group">
    <picker-view bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{provinces}}" range-key="id">
      <picker-view-column>
        {{provinces.map(item => item.name)}}
      </picker-view-column>
    </picker-view>
    <label> </label> <!--用于占位-->
  </view>
  <view class="form-group">
    <picker-view bindchange="bindCityChange" value="{{cityIndex}}" range="{{cities}}" range-key="id">
      <picker-view-column>
        {{cities.map(item => item.name)}}
      </picker-view-column>
    </picker-view>
    <label> </label><!--用于占位-->
  </view>
  <view class="form-group">
    <picker-view bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{districts}}" range-key="id">
      <picker-view-column>
        {{districts.map(item => item.name)}}
      </picker-view-column>
    </picker-view>
    <label> </label><!--用于占位-->
  </view>
</view>

在上面的案例中，使用range属性获取后端接口返回的数据，使用range-key属性指定数据列表中的id属性作为选项的名称，实现多级联动选择器的构建。

总结

微信小程序多列选择器是小程序的一个常用组件，可以用于各种选项的选择。同时，range-key属性是多列选择器中的一个重要属性，可以用于指定选项列表中的名称属性，方便数据的获取，是组件的一个重要功能点。