使用uniapp的 picker 组件。按照picker - uni-app官网 (dcloud.io)文档,无论如何@change都不触发!!!
据说HBuilderX alpha 2.9.0+ 修复过该问题。
查找最新使用该组件的程序,发现组件新增了range-key属性!并且组件写法也有变化。
完整测试代码如下:
<template>
<view>
<view class="uni-padding-wrap">
<view class="uni-title" @click="yearclick">日期:{{year}}年</view>
</view>
<picker-view v-if="visible" :value="value" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index" @longtap="selindexchange(index)">{{item.id}},{{item.wz}},{{item.sz}}</view>
</picker-view-column>
</picker-view>
<image :src="image_src" mode="widthFix"></image>
<picker @change="linshichange" :value="selindex" :range="years" range-key="wz">
<view >{{years[selindex].wz}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
const years = [{
id: 1997,
wz: '花多少克',
sz: 10,
image_src:"https://api-hmugo-web.itheima.net/pyg/pic_floor01_5@2x.png"
},
{
id: 2002,
wz: '安达顺',
sz: 22,
image_src:"https://api-hmugo-web.itheima.net/pyg/pic_floor03_4@2x.png"
},
{
id: 2007,
wz: '发货的',
sz: 14,
image_src:"https://api-hmugo-web.itheima.net/pyg/pic_floor02_2@2x.png"
},
{
id: 2019,
wz: '热而言',
sz: 7,
image_src:"https://api-hmugo-web.itheima.net/pyg/pic_floor01_4@2x.png"
},
]
return {
years,
year: 0,
value: [0],
selindex: 0,
visible: true,
image_src:''
}
},
methods: {
selindexchange(mindex) {
this.selindex = mindex
this.year = this.years[this.selindex].id
this.value = [this.selindex]
this.image_src=this.years[this.selindex].image_src
this.visible=false
},
yearclick(){
this.visible=true
},
linshichange:function(e){
this.selindexchange(e.detail.value)
}
},
onLoad() {
this.selindexchange(0)
}
}
</script>
<style>
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
height: 50px;
align-items: center;
justify-content: center;
text-align: center;
}
</style>