uni-app使用picker的多种选择器（多列，时间）效果demo（整理）

<template>
    <view>
        <view>
            <picker :range="years" @change="yearChange">
                {
   
   { years[yearsIndex] }} 
            </picker>
        </view>
    </view>
    
</template>

<script>
    export default {
      
      
        data()  {
      
      
            return {
      
      
                years:["请选择年份",1998,1999,2000],
                yearsIndex:0
            }
        },
        methods:{
      
      
            yearChange:function(e){
      
      
                console.log(e)
                //获得对象的 detail的 value
                //通过数组的下标改变显示在页面的值
                this.yearsIndex = e.detail.value;
            }
        }
    }
</script>

<style>

</style>

<template>
    <view>
    <!--     <view>
            <picker :range="years" @change="yearChange">
                {
    
    { years[yearsIndex] }} 
            </picker>
        </view>     -->
        
        <!-- mode="multiSelector" 多列选择器 -->
            <view>
                <picker :range="years" @change="yearChange" mode="multiSelector">
                    {
   
   {  years[0][yearsIndex1] }} --- {
   
   { years[1][yearsIndex2]  }}
                </picker>
            </view>
        </view>
    </view>
    
</template>

<script>
    export default {
      
      
        data()  {
      
      
            return {
      
      
                years:[
                    ["请选择年份", 1998, 1999, 2000],
                    ["请选择日期", 11, 12, 13]
                ],
                yearsIndex1: 0,
                yearsIndex2: 0
            }
        },
        methods:{
      
       
            yearChange:function(e){
      
      
                console.log(e)
                //获得对象的 detail的 value
                //通过数组的下标改变显示在页面的值
                this.yearsIndex1 = e.detail.value[0];
                this.yearsIndex2 = e.detail.value[1];
            }
        }
    }
</script>

<style>

</style>

转载-原文更详细