uni-app使用picker的多种选择器（多列，时间，地区）

picker底部滚动选择器

<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>

效果图

多列选择器

多列选择器基于二维数组， 在标签中添加  mode="multiSelector"， 

<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>

效果图

时间选择器

时间选择器 mode=“time”

<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> -->
            
            <picker mode="time" :range="years" @change="yearChange">
                <view>{{ timetext }} </view>
            </picker>
        
    </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];
    //             console.log(this.yearsIndex1)
    //             console.log(this.yearsIndex2)
    //         }
    //     }
    // }
    export default{
        data(){
            return{
                timetext: '请选择时间'
            }
        },
        methods:{
            yearChange : function(e){
                console.log(e)
                this.timetext = e.detail.value;
            } 
        }
    }
</script>

<style>

</style>

效果图

地区选择器

地区选择器 mode="region"

<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> -->
            
            <!-- mode="time" 时间选择器-->
            <!-- <picker mode="time" :range="years" @change="yearChange">
                <view>{{ timetext }} </view>
            </picker> -->
        
        
            <!-- mode="region" 地区选择器 -->
            <picker mode="region" :range="years" @change="yearChange">
                <view>{{ timetext }} </view>
            </picker>
    </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];
    //             console.log(this.yearsIndex1)
    //             console.log(this.yearsIndex2)
    //         }
    //     }
    // }
    
    // 时间选择器
    // export default{
    //     data(){
    //         return{
    //             timetext: '请选择时间'
    //         }
    //     },
    //     methods:{
    //         yearChange : function(e){
    //             console.log(e)
    //             this.timetext = e.detail.value;
    //         } 
    //     }
    // }
    
    //地区选择器
    export default{
        data(){
            return{
                timetext: '请选择地区'
            }
        },
        methods:{
            yearChange : function(e){
                console.log(e)
                this.timetext = e.detail.value;
            } 
        }
    }
     
    
</script>

<style> 

</style>

效果图