微信小程序Picker组件，绑定对象数组的使用(id/text)

小程序

Picker组件这里不再进行介绍，官网已经描述的很清楚了。官网里的例子数据都是单文本的，但是实际工作中，都是采用id/text来进行应用，id是隐藏的数据表记录id值，text是需要显示的文本。数据源如下：

[{"id":"1","text":"哈尔滨"},{"id":"2","text":"长春"},{"id":"3","text":"沈阳"}]

假设数据源为citys，那么在.wxml中绑定，如下：

<view class="weui-cell weui-cell_select">
	<view class="weui-cell__hd weui-cell__hd_in-select-after">
		<view class="weui-label">选择城市</view>
	</view>
	<view class="weui-cell__bd">
		<picker bindchange="bindCityChange" value="{{projects[cityIndex].id}}" range="{{citys}}" range-key="text">
			<view class="weui-select">{{citys[cityIndex].text}}</view>
		</picker>
	</view>
</view>

绑定的变更事件bindCityChange：

//城市选择器
bindCityChange: function (e) {
  var index = e.detail.value;
  var currentId = this.data.citys[index].id; // 这个id就是选中项的id
  this.setData({
    cityIndex: index
  })
  console.log(currentId);
}

这样就可以得到所选择记录的id了。

作者： Zealon
崇尚简单，一切简单自然的事物都是美好的。