app效果:
h5,微信小程序无此bug
代码如下
<template>
<view>
<view style="height: 100rpx;"></view>
{{JSON.stringify(value)}}
<button @click="openPopup">打开选择器</button>
<uniPopup :show="false" ref="popup" type="bottom" >
<picker-view class="single-picker" indicator-style="height: 80rpx;" @change="changePicker" :value="value">
<picker-view-column>
<block v-for="(item,index) in list" :key="index">
<view class="disease-item">{{item[labelKey]}}</view>
</block>
<!-- 匿名插槽,可用于 插入显示列表加载提示 -->
<slot></slot>
</picker-view-column>
</picker-view>
</uniPopup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: "getlocation",
components:{
uniPopup
},
data() {
return {
labelKey: "name",
list: [],
value: [0]
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
for (var i = 0; i < 12; i++) {
this.list.push({
name: "" + i,
id: i
})
}
},
changePicker(e) {
console.log(e.detail.value)
this.value = e.detail.value;
//this.$emit("change",e.detail.value);
},
openPopup() {
this.$refs.popup.open();
},
changePopUp(obj) {
console.log(this.value)
}
}
}
</script>
<style lang="scss">
.single-picker{
height: 50vh;
}
</style>