一、uni-apppicker值重复
在使用uni-apppicker时，我们可能会遇到picker选择器的值重复的情况。这很容易发生，因为我们可能会使用for循环来动态生成picker的数据项，可能会出现值重复的情况。 解决这个问题有几种方法，最简单的是使用for循环时给每个数据项一个不同的id，使得每个数据项都有一个唯一的值。
<uni-apppicker style="width:100%;height:200px" @confirm="getData" :data="data"></uni-apppicker>
<script>
export default {
data() {
return {
data: [
{ id: 1, text: '选项1' },
{ id: 2, text: '选项2' },
{ id: 3, text: '选项3' },
{ id: 4, text: '选项4' },
{ id: 5, text: '选项5' }
]
}
},
methods: {
getData(e) {
console.log(this.data[e.detail.value]);
}
}
}
</script>
二、uni-apppicker时间选择器传值
在使用uni-apppicker时，我们可能会遇到时间选择器的传值问题。使用uni-apppicker的时间选择器时，我们会得到一个时间戳，但我们常常需要将它转换为指定格式的日期。 解决这个问题的方法也有很多种，最简单的是使用JS的Date对象进行格式转换，将时间戳转换为日期字符串。
<uni-apppicker style="width:100%;height:200px" :mode="'date'" @confirm="getDate"></uni-apppicker>
<script>
export default {
methods: {
getDate(e) {
const date = new Date(e.detail.value);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const format = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
console.log(format);
}
}
}
</script>
三、uni-apppicker三级联动选取
使用uni-apppicker的三级联动选取功能时，我们需要传递三个数组作为数据源。这时我们需要注意数据源的格式和联动的设置。 首先，我们要保证传递的数据源格式是正确的。每个数组中的元素应该包含value和text两个属性，分别代表该项的值和显示文本。 其次，我们需要定义联动的关系，也就是确定每一级选中后下一级的数据应该是什么。在uni-apppicker中，我们可以使用数组的嵌套来表达这种关系。
<uni-apppicker style="width:100%;height:200px" :columns="columns" @change="onChange"></uni-apppicker>
<script>
export default {
data() {
return {
columns: [
[
{ value: '1', text: '北京' },
{ value: '2', text: '上海' },
{ value: '3', text: '广州' },
{ value: '4', text: '深圳' }
],
[
{ value: '11', text: '朝阳区' },
{ value: '12', text: '海淀区' },
{ value: '13', text: '丰台区' },
{ value: '21', text: '黄浦区' },
{ value: '22', text: '徐汇区' },
{ value: '23', text: '长宁区' },
{ value: '24', text: '静安区' },
{ value: '25', text: '普陀区' },
{ value: '26', text: '闸北区' },
{ value: '27', text: '虹口区' },
{ value: '28', text: '杨浦区' },
{ value: '29', text: '宝山区' },
{ value: '30', text: '闵行区' },
{ value: '31', text: '嘉定区' },
{ value: '32', text: '浦东新区' },
{ value: '33', text: '金山区' },
{ value: '34', text: '松江区' },
{ value: '35', text: '青浦区' }
],
[
{ value: '111', text: '朝阳公园' },
{ value: '112', text: '三里屯' },
{ value: '113', text: '工体' },
{ value: '121', text: '五道口' },
{ value: '122', text: '中关村' },
{ value: '123', text: '清华大学' },
{ value: '124', text: '北大' },
{ value: '125', text: '颐和园' },
{ value: '126', text: '圆明园' },
{ value: '131', text: '浦东机场' },
{ value: '132', text: '陆家嘴' },
{ value: '133', text: '东方明珠' },
{ value: '141', text: '深圳湾' },
{ value: '142', text: '世界之窗' },
{ value: '143', text: '华侨城' },
{ value: '144', text: '南山科技园' },
{ value: '145', text: '宝安中心' }
]
]
}
},
methods: {
onChange(e) {
console.log(e.detail);
}
}
}
</script>
