picker底部滾動選擇器

 1 <template>
 2     <view>
 3         <view>
 4             <picker :range="years" @change="yearChange">
 5                 {{ years[yearsIndex] }} 
 6             </picker>
 7         </view>
 8     </view>
 9     
10 </template>
11 
12 <script>
13     export default {
14         data()  {
15             return {
16                 years:["請選擇年份",1998,1999,2000],
17                 yearsIndex:0
18             }
19         },
20         methods:{
21             yearChange:function(e){
22                 console.log(e)
23                 //獲得對象的 detail的 value
24                 //通過數組的下標改變顯示在頁面的值
25                 this.yearsIndex = e.detail.value;
26             }
27         }
28     }
29 </script>
30 
31 <style>
32 
33 </style>

效果圖

現在可以實現選擇年份在頁面上顯示，通過控制台我們可以看到 this.yearsIndex = e.detail.value；確實綁定在了數組上來實現這個方法

話說這個截動態圖這真的太棒了，比截圖片好多了

多列選擇器

多列選擇器基於二維數組，在標簽中添加 mode="multiSelector"，

 1 <template>
 2     <view>
 3     <!--     <view>
 4             <picker :range="years" @change="yearChange">
 5                 {{ years[yearsIndex] }} 
 6             </picker>
 7         </view>     -->
 8         
 9         <!-- mode="multiSelector" 多列選擇器 -->
10             <view>
11                 <picker :range="years" @change="yearChange" mode="multiSelector">
12                     {{  years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2]  }}
13                 </picker>
14             </view>
15         </view>
16     </view>
17     
18 </template>
19 
20 <script>
21     export default {
22         data()  {
23             return {
24                 years:[
25                     ["請選擇年份", 1998, 1999, 2000],
26                     ["請選擇日期", 11, 12, 13]
27                 ],
28                 yearsIndex1: 0,
29                 yearsIndex2: 0
30             }
31         },
32         methods:{ 
33             yearChange:function(e){
34                 console.log(e)
35                 //獲得對象的 detail的 value
36                 //通過數組的下標改變顯示在頁面的值
37                 this.yearsIndex1 = e.detail.value[0];
38                 this.yearsIndex2 = e.detail.value[1];
39             }
40         }
41     }
42 </script>
43 
44 <style>
45 
46 </style>

效果圖

時間選擇器

時間選擇器 mode="time"

 1 <template>
 2     <view>
 3     <!--     <view>
 4             <picker :range="years" @change="yearChange">
 5                 {{ years[yearsIndex] }} 
 6             </picker>
 7         </view>     --> 
 8         
 9         <!-- mode="multiSelector" 多列選擇器 -->
10     <!--     <view>
11                 <picker :range="years" @change="yearChange" mode="multiSelector">
12                     {{  years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2]  }}
13                 </picker>
14             </view> -->
15             
16             <picker mode="time" :range="years" @change="yearChange">
17                 <view>{{ timetext }} </view>
18             </picker>
19         
20     </view>
21     
22 </template>
23 
24 <script>
25     // export default { 
26     //     data()  {
27     //         return {  
28     //             years:[
29     //                 ["請選擇年份", 1998, 1999, 2000],
30     //                 ["請選擇日期", 11, 12, 13]
31     //             ],
32     //             yearsIndex1: 0,
33     //             yearsIndex2: 0
34     //         }
35     //     },
36     //     methods:{ 
37     //         yearChange:function(e){
38     //             console.log(e)
39     //             //獲得對象的 detail的 value
40     //             //通過數組的下標改變顯示在頁面的值
41     //             this.yearsIndex1 = e.detail.value[0];
42     //             this.yearsIndex2 = e.detail.value[1];
43     //             console.log(this.yearsIndex1)
44     //             console.log(this.yearsIndex2)
45     //         }
46     //     }
47     // }
48     export default{
49         data(){
50             return{
51                 timetext: '請選擇時間'
52             }
53         },
54         methods:{
55             yearChange : function(e){
56                 console.log(e)
57                 this.timetext = e.detail.value;
58             } 
59         }
60     }
61 </script>
62 
63 <style>
64 
65 </style>

效果圖

地區選擇器

地區選擇器 mode="region"

 1 <template>
 2     <view>
 3     <!--     <view>
 4             <picker :range="years" @change="yearChange">
 5                 {{ years[yearsIndex] }} 
 6             </picker>
 7         </view>     --> 
 8         
 9         <!-- mode="multiSelector" 多列選擇器 -->
10     <!--     <view>
11                 <picker :range="years" @change="yearChange" mode="multiSelector">
12                     {{  years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2]  }}
13                 </picker>
14             </view> -->
15             
16             <!-- mode="time" 時間選擇器-->
17             <!-- <picker mode="time" :range="years" @change="yearChange">
18                 <view>{{ timetext }} </view>
19             </picker> -->
20         
21         
22             <!-- mode="region" 地區選擇器 -->
23             <picker mode="region" :range="years" @change="yearChange">
24                 <view>{{ timetext }} </view>
25             </picker>
26     </view>
27     
28 </template>
29 
30 <script>
31     // export default { 
32     //     data()  {
33     //         return {  
34     //             years:[
35     //                 ["請選擇年份", 1998, 1999, 2000],
36     //                 ["請選擇日期", 11, 12, 13]
37     //             ],
38     //             yearsIndex1: 0,
39     //             yearsIndex2: 0
40     //         }
41     //     },
42     //     methods:{ 
43     //         yearChange:function(e){
44     //             console.log(e)
45     //             //獲得對象的 detail的 value
46     //             //通過數組的下標改變顯示在頁面的值
47     //             this.yearsIndex1 = e.detail.value[0];
48     //             this.yearsIndex2 = e.detail.value[1];
49     //             console.log(this.yearsIndex1)
50     //             console.log(this.yearsIndex2)
51     //         }
52     //     }
53     // }
54     
55     // 時間選擇器
56     // export default{
57     //     data(){
58     //         return{
59     //             timetext: '請選擇時間'
60     //         }
61     //     },
62     //     methods:{
63     //         yearChange : function(e){
64     //             console.log(e)
65     //             this.timetext = e.detail.value;
66     //         } 
67     //     }
68     // }
69     
70     //地區選擇器
71     export default{
72         data(){
73             return{
74                 timetext: '請選擇地區'
75             }
76         },
77         methods:{
78             yearChange : function(e){
79                 console.log(e)
80                 this.timetext = e.detail.value;
81             } 
82         }
83     }
84      
85     
86 </script>
87 
88 <style> 
89 
90 </style>

效果圖

選擇器這塊倒是沒啥，直接用就行了

2019-06-17 14:02:51

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uni-app之數據驅動選擇器（uni-data-picker ）—— 不顯示邊框 uni-app之數據驅動的picker選擇器（ uni-data-picker）之可以選擇到任意級別 uni-app中組件picker的基本使用（日期選擇器為例） uni-app選擇器 uni-app省市區地址選擇器 uni-app 之聊天室頁面滾動到底部 uni-app之 DatePicker 多時間粒度選擇器組件的使用 picker 選擇器微信小程序—picker(滾動選擇器) uni-app中picker相關坑