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

/ 微信开发 / 1109浏览

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了。