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应用程序中轻松地使用它们。