uni-apppicker详解

一、uni-apppicker值重复

在使用uni-apppicker时，我们可能会遇到picker选择器的值重复的情况。这很容易发生，因为我们可能会使用for循环来动态生成picker的数据项，可能会出现值重复的情况。

解决这个问题有几种方法，最简单的是使用for循环时给每个数据项一个不同的id，使得每个数据项都有一个唯一的值。

<uni-apppicker style="width:100%;height:200px" @confirm="getData" :data="data"></uni-apppicker>


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>


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>


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);
    }
  }
}