uniapppicker詳解

uniapppicker是一種在uni-app中使用的UI組件，主要用於選擇數據。uniapppicker提供了多種不同的選擇器類型，其中包括值重複選擇器、時間選擇器和三級聯動選擇器。

一、值重複選擇器

值重複選擇器是uniapppicker中最簡單的一種選擇器。它的作用是讓用戶從一個列表中選擇一個或多個值，並且可以允許值的重複選擇。通過傳入數據源和當前選擇的值，可以輕鬆實現值重複選擇器。

//值重複選擇器示例代碼

  


//插入數據源和change事件的實現

  export default{
    data(){
      return{
        selectedIndex: 0, //當前選擇的值的索引
        items: ['北京', '上海', '廣州', '深圳'] //可供選擇的值的數組
      }
    },
    methods: {
      onPickerChange(e) {
        this.selectedIndex = e.target.value;
      }
    }
  }

上述示例代碼中，通過uni-app-picker組件可以創建一個值重複選擇器組件。使用picker-items屬性提供了可供選擇的值的數組，selected-index屬性提供了當前選擇的值的索引。同時，@change事件提供了當前選擇的值改變時觸發的回調函數，以便在選擇發生改變時做出相應的響應。

二、時間選擇器傳值

時間選擇器是uniapppicker中另一種常見的選擇器類型。它的主要目的是讓用戶選擇一個日期/時間。與值重複選擇器不同的是，在時間選擇器中，每個可選選項都具有唯一的值，因此不存在重複的值。下面的示例代碼演示了如何創建時間選擇器組件並獲取選中的時間。

//時間選擇器示例代碼

  


//插入時間選擇器和change事件的實現

  export default{
    data(){
      return{
        datetime: '2022-09-17' // 設置默認日期
      }
    },
    methods:{
      onDatetimePickerChange(e) {
        this.datetime = e.target.value;
      }
    }
  }

上述示例代碼中，使用uni-datetime-picker組件創建了一個時間選擇器。mode屬性指定了使用日期模式，:value屬性設置了默認日期以及當前選擇的值的索引。同時，@change事件提供了觸發由uni-datetime-picker組件選定值的回調函數。

三、三級聯動選取

三級聯動選擇器是uniapppicker中更複雜的一種選擇器。特別是在需要動態生成多個選項的情況下，將會使用三級聯動篩選器。下面的示例代碼演示了如何動態生成三級聯動選擇器並獲取所選中的值。

//三級聯動選擇器示例代碼

  
    
  


//插入3級聯動選擇器和change事件的實現

  export default{
    data(){
      return{
        selectedValue: [0,0,0],  //設置默認列表
        pickerData: []   //數據源
      }
    },
    onPickerViewChange(e) {
      console.log('picker change', e);
      this.selectedValue = e.target.value;
    },
    created(){
        //動態生成數據源，此處簡單示例
        const arr = []
        for(let i=0;i<8;i++){
          const childArr1=[]
          for(let j=0;j<8;j++){
            const childArr2=[]
            for(let k=0;k<8;k++){
            childArr2.push('option' + k)
          }
          childArr1.push({text: 'second' + j, children: childArr2})
        }
        arr.push({text: 'first' + i, children: childArr1})
      }
      this.pickerData = arr
    }
  }

上述示例代碼中，使用uni-app-picker-view組件創建了一個三級聯動選擇器。在此示例代碼中，數據源是動態生成的，但實際應用可能需要從服務器或其他數據源中獲取數據。同時，為每一個數據視圖列提供不同的數據源，顯示為不同的列。最後，@change事件提供了觸發由uni-app-picker-view組件選擇的值的回調函數。

四、總結

本文對uniapppicker的使用進行了詳細的講解。值重複選擇器、時間選擇器和三級聯動選擇器是uniapppicker中常用的三種選擇器。通過上述示例代碼，可以了解它們的用法，並在自己的uni-app應用程序中輕鬆地使用它們。