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