微信小程序组件(七)picker选择器

 莫名疯  Javascript  2018-03-30  851  发表评论

再记录一各微信小组件picker的使用。picker是从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分:

①普通选择器 mode = selector       (默认为普通)

②多列选择器 mode = multiSelector(最低版本:1.4.0

③时间选择器 mode = time

④日期选择器 mode = date

⑤省市区选择器 mode = region(最低版本:1.4.0


1.首先介绍普通选择器,效果图如下↓

点击普通选择器下面区域,初始值为“美国”,选择变化后,当前选择区域进行更新。


(1)wxml中代码段如下,bindchange绑定的bindPickerChange函数在js中实现,range属性为选择器可选择的选项,value值为初次加载时的默认选择;

  1. <view class="section">  
  2.   <view class="section__title">普通选择器</view>  
  3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
  4.     <view class="picker">  
  5.       当前选择:{{array[index]}}  
  6.     </view>  
  7.   </picker>  
  8. </view>  
(2)普通选择器相关的js代码段

①选择项为array中的各项,“美国、中国...”,初始值index默认为0,因此初次选项为“美国”。若index初始化为1,初始选项为“中国”。(即为array中的索引对应)

②bindPickerChange当选择器发生变化时触发,在本例中在控制台输出变化信息,由e传入;同时使用setData函数更改index值,“当前选择”区域更新为新的array[index]。

[javascript] view plain copy
  1. Page({  
  2.   data: {  
  3.     array: ['美国''中国''巴西''日本'],  
  4.     index: 0,  
  5.   },  
  6.   bindPickerChange: function (e) {  
  7.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  8.     this.setData({  
  9.       index: e.detail.value  
  10.     })  
  11.   }  
  12. })  

(3)普通选择器属性值

属性名类型默认值说明
rangeArray / Object Array[]mode为 selector 或 multiSelector 时,range 有效
range-keyString 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber0value 的值表示选择了 range 中的第几个(下标从 0 开始)
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用


2.多列选择器,效果图↓

第一列选定时第二列值进行更新,选择第二列值时第三列值相应更新



(1)wxml中代码 ↓

①bindchange绑定方法bindMultiPickerChange为多列选择后,点击“确定”后触发;

②bindcolumnchange绑定方法bindMultiPickerColumnChange为每一列发生变化时触发,可用于识别发生变化的列;

③multiArray[i]为第i列的待选择数组,multiIndex[i]为第i列被选中的值。

  1. <view class="section">  
  2.   <view class="section__title">多列选择器</view>  
  3.   <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">  
  4.     <view class="picker">  
  5.       当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}  
  6.     </view>  
  7.   </picker>  
  8. </view>  


(2)js中多列选择器相关代码↓

①bindMultiPickerChange与bindPickerChange函数类似;

②bindMultiPickerColumnChange函数,首先声明变量data记录multiArray和multiIndex;e.datail.column记录变化的列索引,e.detail.value记录变化后的值。我们用switch方法根据变化的列索引进行响应数据更新。如当第0列变化时,首先判断第0列的选定值multiIndex[0],如果为0,将第1列的待选值multiArray[1]更新为“扁性动物,线性动物...”,第2列待选值multiArray[2]更新为“猪肉绦虫...”;并将第1、2列的默认选值都置为0。最后this.setData(data);更新多列选择器的选中值。

[javascript] view plain copy
  1. Page({  
  2.   data: {  
  3.     array: ['美国''中国''巴西''日本'],  
  4.     multiArray: [['无脊柱动物''脊柱动物'], ['扁性动物''线形动物''环节动物''软体动物''节肢动物'], ['猪肉绦虫''吸血虫']],  
  5.     multiIndex: [0, 0, 0],   
  6.   },  
  7.      
  8.   bindMultiPickerChange: function (e) {  
  9.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  10.     this.setData({  
  11.       multiIndex: e.detail.value  
  12.     })  
  13.   },  
  14.   bindMultiPickerColumnChange: function (e) {  
  15.     console.log('修改的列为', e.detail.column, ',值为', e.detail.value);  
  16.     var data = {  
  17.       multiArray: this.data.multiArray,  
  18.       multiIndex: this.data.multiIndex  
  19.     };  
  20.     data.multiIndex[e.detail.column] = e.detail.value;  
  21.     switch (e.detail.column) {  
  22.       case 0:  
  23.         switch (data.multiIndex[0]) {  
  24.           case 0:  
  25.             data.multiArray[1] = ['扁性动物''线形动物''环节动物''软体动物''节肢动物'];  
  26.             data.multiArray[2] = ['猪肉绦虫''吸血虫'];  
  27.             break;  
  28.           case 1:  
  29.             data.multiArray[1] = ['鱼''两栖动物''爬行动物'];  
  30.             data.multiArray[2] = ['鲫鱼''带鱼'];  
  31.             break;  
  32.         }  
  33.         data.multiIndex[1] = 0;  
  34.         data.multiIndex[2] = 0;  
  35.         break;  
  36.       case 1:  
  37.         switch (data.multiIndex[0]) {  
  38.           case 0:  
  39.             switch (data.multiIndex[1]) {  
  40.               case 0:  
  41.                 data.multiArray[2] = ['猪肉绦虫''吸血虫'];  
  42.                 break;  
  43.               case 1:  
  44.                 data.multiArray[2] = ['蛔虫'];  
  45.                 break;  
  46.               case 2:  
  47.                 data.multiArray[2] = ['蚂蚁''蚂蟥'];  
  48.                 break;  
  49.               case 3:  
  50.                 data.multiArray[2] = ['河蚌''蜗牛''蛞蝓'];  
  51.                 break;  
  52.               case 4:  
  53.                 data.multiArray[2] = ['昆虫''甲壳动物''蛛形动物''多足动物'];  
  54.                 break;  
  55.             }  
  56.             break;  
  57.           case 1:  
  58.             switch (data.multiIndex[1]) {  
  59.               case 0:  
  60.                 data.multiArray[2] = ['鲫鱼''带鱼'];  
  61.                 break;  
  62.               case 1:  
  63.                 data.multiArray[2] = ['青蛙''娃娃鱼'];  
  64.                 break;  
  65.               case 2:  
  66.                 data.multiArray[2] = ['蜥蜴''龟''壁虎'];  
  67.                 break;  
  68.             }  
  69.             break;  
  70.         }  
  71.         data.multiIndex[2] = 0;  
  72.         console.log(data.multiIndex);  
  73.         break;  
  74.     }  
  75.     this.setData(data);  
  76.   }   
  77. })  

(3)多列选择器属性

属性名类型默认值说明
range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]
range-keyString 当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueArray[]value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value}
bindcolumnchangeEventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
disabledBooleanfalse是否禁用

3.时间选择器,效果图↓与多列选择器类似,但只需开发者指定开始时间与结束时间,微信自动填充了待选择队列



(1)wxml中代码↓,当用户选中start之前与end之后的时间,选择器会自动回滚到允许值。

  1. <view class="section">  
  2.   <view class="section__title">时间选择器</view>  
  3.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">  
  4.     <view class="picker">  
  5.       当前选择: {{time}}  
  6.     </view>  
  7.   </picker>  
  8. </view>  

(2)js中时间选择器代码段↓

[javascript] view plain copy
  1. Page({  
  2.   data: {  
  3.     time: '12:01',   
  4.   },  
  5.      
  6.   bindTimeChange: function (e) {  
  7.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  8.     this.setData({  
  9.       time: e.detail.value  
  10.     })  
  11.   },  
  12.      
  13. })  

(3)时间选择器属性

属性名类型默认值说明
valueString 表示选中的时间,格式为"hh:mm"
startString 表示有效时间范围的开始,字符串格式为"hh:mm"
endString 表示有效时间范围的结束,字符串格式为"hh:mm"
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用

4.日期选择器,与时间选择器基本类似,效果图↓,无法选择2017年12月1日之后的日期



(1)wxml中代码↓

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-12-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>


(2)js中代码段↓

[javascript] view plain copy
  1. Page({  
  2.   data: {  
  3.     date: '2016-09-01',       
  4.   },  
  5.      
  6.   bindDateChange: function (e) {  
  7.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  8.     this.setData({  
  9.       date: e.detail.value  
  10.     })  
  11.   },  
  12.      
  13. })  


(3)时间选择器属性↓

属性名类型默认值说明
valueString0表示选中的日期,格式为"YYYY-MM-DD"
startString 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
endString 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fieldsStringday有效值 year,month,day,表示选择器的粒度
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用

fields 有效值:

说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天


5.地区选择器,这个比较常用↓



(1)wxml中代码段↓

  1. <view class="section">  
  2.   <view class="section__title">省市区选择器</view>  
  3.   <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">  
  4.     <view class="picker">  
  5.       当前选择:{{region[0]}},{{region[1]}},{{region[2]}}  
  6.     </view>  
  7.   </picker>  
  8. </view>  

(2)js代码↓,地区无需手动敲入,微信内嵌。

[javascript] view plain copy
  1. Page({  
  2.   data: {    
  3.     region: ['广东省''广州市''海珠区'],  
  4.     customItem: '全部'  
  5.   },  
  6.      
  7.   bindRegionChange: function (e) {  
  8.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  9.     this.setData({  
  10.       region: e.detail.value  
  11.     })  
  12.   }  
  13. })  

(3)地区选择器属性 ↓

属性名类型默认值说明最低版本
valueArray[]表示选中的省市区,默认选中每一列的第一个值 
custom-itemString 可为每一列的顶部添加一个自定义的项1.5.0
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} 
disabledBooleanfalse是否禁用



6.最后附上完整的代码

(1)wxml

[plain] view plain copy
  1. <view class="section">  
  2.   <view class="section__title">普通选择器</view>  
  3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
  4.     <view class="picker">  
  5.       当前选择:{{array[index]}}  
  6.     </view>  
  7.   </picker>  
  8. </view>  
  9.   
  10. <view class="section">  
  11.   <view class="section__title">多列选择器</view>  
  12.   <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">  
  13.     <view class="picker">  
  14.       当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}  
  15.     </view>  
  16.   </picker>  
  17. </view>  
  18.   
  19. <view class="section">  
  20.   <view class="section__title">时间选择器</view>  
  21.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">  
  22.     <view class="picker">  
  23.       当前选择: {{time}}  
  24.     </view>  
  25.   </picker>  
  26. </view>  
  27.   
  28. <view class="section">  
  29.   <view class="section__title">日期选择器</view>  
  30.   <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-12-01" bindchange="bindDateChange">  
  31.     <view class="picker">  
  32.       当前选择: {{date}}  
  33.     </view>  
  34.   </picker>  
  35. </view>  
  36. <view class="section">  
  37.   <view class="section__title">省市区选择器</view>  
  38.   <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">  
  39.     <view class="picker">  
  40.       当前选择:{{region[0]}},{{region[1]}},{{region[2]}}  
  41.     </view>  
  42.   </picker>  
  43. </view>  

(2)js代码

[plain] view plain copy
  1. Page({  
  2.   data: {  
  3.     array: ['美国', '中国', '巴西', '日本'],  
  4.     objectArray: [  
  5.       {  
  6.         id: 0,  
  7.         name: '美国'  
  8.       },  
  9.       {  
  10.         id: 1,  
  11.         name: '中国'  
  12.       },  
  13.       {  
  14.         id: 2,  
  15.         name: '巴西'  
  16.       },  
  17.       {  
  18.         id: 3,  
  19.         name: '日本'  
  20.       }  
  21.     ],  
  22.     index: 0,  
  23.     multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],  
  24.     objectMultiArray: [  
  25.       [  
  26.         {  
  27.           id: 0,  
  28.           name: '无脊柱动物'  
  29.         },  
  30.         {  
  31.           id: 1,  
  32.           name: '脊柱动物'  
  33.         }  
  34.       ], [  
  35.         {  
  36.           id: 0,  
  37.           name: '扁性动物'  
  38.         },  
  39.         {  
  40.           id: 1,  
  41.           name: '线形动物'  
  42.         },  
  43.         {  
  44.           id: 2,  
  45.           name: '环节动物'  
  46.         },  
  47.         {  
  48.           id: 3,  
  49.           name: '软体动物'  
  50.         },  
  51.         {  
  52.           id: 3,  
  53.           name: '节肢动物'  
  54.         }  
  55.       ], [  
  56.         {  
  57.           id: 0,  
  58.           name: '猪肉绦虫'  
  59.         },  
  60.         {  
  61.           id: 1,  
  62.           name: '吸血虫'  
  63.         }  
  64.       ]  
  65.     ],  
  66.     multiIndex: [0, 0, 0],  
  67.     date: '2016-09-01',  
  68.     time: '12:01',  
  69.     region: ['广东省', '广州市', '海珠区'],  
  70.     customItem: '全部'  
  71.   },  
  72.   bindPickerChange: function (e) {  
  73.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  74.     this.setData({  
  75.       index: e.detail.value  
  76.     })  
  77.   },  
  78.   bindMultiPickerChange: function (e) {  
  79.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  80.     this.setData({  
  81.       multiIndex: e.detail.value  
  82.     })  
  83.   },  
  84.   bindMultiPickerColumnChange: function (e) {  
  85.     console.log('修改的列为', e.detail.column, ',值为', e.detail.value);  
  86.     var data = {  
  87.       multiArray: this.data.multiArray,  
  88.       multiIndex: this.data.multiIndex  
  89.     };  
  90.     data.multiIndex[e.detail.column] = e.detail.value;  
  91.     switch (e.detail.column) {  
  92.       case 0:  
  93.         switch (data.multiIndex[0]) {  
  94.           case 0:  
  95.             data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];  
  96.             data.multiArray[2] = ['猪肉绦虫', '吸血虫'];  
  97.             break;  
  98.           case 1:  
  99.             data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];  
  100.             data.multiArray[2] = ['鲫鱼', '带鱼'];  
  101.             break;  
  102.         }  
  103.         data.multiIndex[1] = 0;  
  104.         data.multiIndex[2] = 0;  
  105.         break;  
  106.       case 1:  
  107.         switch (data.multiIndex[0]) {  
  108.           case 0:  
  109.             switch (data.multiIndex[1]) {  
  110.               case 0:  
  111.                 data.multiArray[2] = ['猪肉绦虫', '吸血虫'];  
  112.                 break;  
  113.               case 1:  
  114.                 data.multiArray[2] = ['蛔虫'];  
  115.                 break;  
  116.               case 2:  
  117.                 data.multiArray[2] = ['蚂蚁', '蚂蟥'];  
  118.                 break;  
  119.               case 3:  
  120.                 data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];  
  121.                 break;  
  122.               case 4:  
  123.                 data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];  
  124.                 break;  
  125.             }  
  126.             break;  
  127.           case 1:  
  128.             switch (data.multiIndex[1]) {  
  129.               case 0:  
  130.                 data.multiArray[2] = ['鲫鱼', '带鱼'];  
  131.                 break;  
  132.               case 1:  
  133.                 data.multiArray[2] = ['青蛙', '娃娃鱼'];  
  134.                 break;  
  135.               case 2:  
  136.                 data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];  
  137.                 break;  
  138.             }  
  139.             break;  
  140.         }  
  141.         data.multiIndex[2] = 0;  
  142.         console.log(data.multiIndex);  
  143.         break;  
  144.     }  
  145.     this.setData(data);  
  146.   },  
  147.   bindDateChange: function (e) {  
  148.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  149.     this.setData({  
  150.       date: e.detail.value  
  151.     })  
  152.   },  
  153.   bindTimeChange: function (e) {  
  154.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  155.     this.setData({  
  156.       time: e.detail.value  
  157.     })  
  158.   },  
  159.   bindRegionChange: function (e) {  
  160.     console.log('picker发送选择改变,携带值为', e.detail.value)  
  161.     this.setData({  
  162.       region: e.detail.value  
  163.     })  
  164.   }  
  165. })  

(3)wxss

[plain] view plain copy
  1. .section {  
  2.   margin-top: 20px;  
  3. }  
  4.   
  5. .section__title {  
  6.   text-align: center;  
  7.   background: wheat;  
  8. }  
所有评论
加载评论 ...
发表评论