官网的picker 不再介绍,今天主要介绍uni-app中对象数组的通过code取值;反显和设置
百度中有 mpvuePicker 的介绍,说是可以兼容安卓和ios,我使用的官网的picker也在安卓测试用也可以使用,APP 尚未发布,还不知道能不能使用,后续待补
先上代码
template中的代码
<view class="uni-common-mt bgWhite">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
职业
</view>
<view class="uni-list-cell-db">
<picker @change="pickerChange($event,'industry')" :value="data.industry" :range="industryList" range-key="value">
<view class="uni-input">{{industryList[data.industry].value}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
健康状况
</view>
<view class="uni-list-cell-db">
<picker @change="pickerChange($event,'healthy')" :value="data.healthy" :range="healthyList" range-key="value">
<view class="uni-input">{{healthyList[data.healthy].value}}</view>
</picker>
</view>
</view>
</view>
</view>
javascript中的代码
<script>
export default {
components:{
},
data() {
return {
data:{
industry: 0,
healthy:0,
},
industryList: [
{name:"0",value:"国企"},
{name:"1",value:"私企"},
{name:"2",value:"合资"},
],
healthyList: [
{name:"0",value:"没病"},
{name:"1",value:"有病"},
],
}
},
computed:{
},
onLoad() {
},
methods: {
tofamily(e) {
console.log(e)
uni.navigateTo({
url: '../family/family',
success: res => {},
fail: () => {},
complete: () => {}
});
},
pickerChange: function(e,val) {
console.log('picker发送选择改变,携带值为', e.target.value)
this.data[val]=e.target.value
},
}
}
</script>
这段代码,多加一个当前model的参数,实现公共方法,可以使picker 通过数据中的code(name)来获取相对应的value,并显示的功能,而非必须使用外来组件 mpvuePicker 来完成官网应该完成的功能;