Picker

选择器

选择器不管是在 H5 页面还是小程序中使用的都非常多,mpvue框架对选择器的支持也非常好,下面将一一介绍各个类型选择器在 mpvue中的应用。

统一声明:实现这些选择器主要使用的是 picker 组件,他的一些属性可以小程序开发官网查看,不过我也会在下面的文档中对于容易出错的地方进行说明。

单列选择器

示例代码:

  1. <template>
  2. <divclass="page">
  3. <pickerclass="weui-btn" @change="PickerChange" :value="indexPicker" :range="array">
  4. <buttontype="default">单列选择器</button>
  5. </picker>
  6. </div>
  7. </template>
  8. <script>
  9. exportdefault{
  10. data(){
  11. return{
  12. indexPicker:1,
  13. array:['美国','中国','巴西','日本'],
  14. }
  15. },
  16. methods:{
  17. PickerChange(e){
  18. console.log('选中的值为:'+this.array[e.mp.detail.value]);
  19. },
  20. }
  21. }
  22. </script>
  23. <style>
  24. page {
  25. margin-top:100px;
  26. }
  27. </style>

tip

!> 1. bindchangemvp中要写成:@change,以及一些要进行绑定的属性要写成:value的形式

!> 2. 可以通过设置 indexPicker 的值从而可以自定义 picker初始化要显示的值

效果

picker01

多列选择器

示例代码

  1. <template>
  2. <divclass="page">
  3. <pickerclass="weui-btn"mode="multiSelector" @change="MultiPickerChange" :value="indexMulPicker" :range="multiArray">
  4. <buttontype="default">多列选择器</button>
  5. </picker>
  6. </div>
  7. </template>
  8. <script>
  9. exportdefault{
  10. data(){
  11. return{
  12. indexMulPicker:[0,1,1],
  13. multiArray:[['无脊柱动物','脊柱动物'],['扁性动物','线形动物','环节动物','软体动物','节肢动物'],['猪肉绦虫','吸血虫']],
  14. }
  15. },
  16. methods:{
  17. MultiPickerChange(e){
  18. console.log('选中的值为:'+this.multiArray[0][e.mp.detail.value[0]]+'-'+this.multiArray[1][e.mp.detail.value[1]]+'-'+this.multiArray[2][e.mp.detail.value[2]])
  19. },
  20. }
  21. }
  22. </script>
  23. <style>
  24. page {
  25. margin-top:100px;
  26. }
  27. </style>

!> 多列选择和单列选择没有太大的区别,多列选择多了一个 bindcolumnchange属性,指的是某一列的值改变时触发 columnchange 事件。

效果

picker02

时间选择器

示例代码:

  1. <template>
  2. <divclass="page">
  3. <pickerclass="weui-btn"mode="time" :value="time"start="09:01"end="21:01" @change="TimeChange">
  4. <buttontype="default">时间选择器</button>
  5. </picker>
  6. </div>
  7. </template>
  8. <script>
  9. exportdefault{
  10. data(){
  11. return{
  12. time:'12:01',
  13. }
  14. },
  15. methods:{
  16. TimeChange(e){
  17. console.log('选中的时间为:'+ e.mp.detail.value);
  18. },
  19. }
  20. }
  21. </script>
  22. <style>
  23. page {
  24. margin-top:100px;
  25. }
  26. </style>

?> 时间选择器完全是小程序自定义的组件,只需将mode属性设置为time就行了,你也可以设置startend或者value等属性。这些在mpvue中都是完美支持的。

效果

picker03

日期选择器

示例代码

  1. <template>
  2. <divclass="page">
  3. <pickerclass="weui-btn"mode="date" :value="date"start="1999-01-01"end="2099-01-01" @change="DateChange">
  4. <buttontype="default">日期选择器</button>
  5. </picker>
  6. </div>
  7. </template>
  8. <script>
  9. exportdefault{
  10. data(){
  11. return{
  12. date:'2016-09-01',
  13. }
  14. },
  15. methods:{
  16. DateChange(e){
  17. console.log('选中的日期为:'+ e.mp.detail.value);
  18. },
  19. }
  20. }
  21. </script>
  22. <style>
  23. page {
  24. margin-top:100px;
  25. }
  26. </style>

?> 日期选择控件也是小程序的原生picker组件,只需将mode属性设置为date就可以了。

效果

picker04

城市选择器

示例代码:

  1. <template>
  2. <divclass="page">
  3. <pickerclass="weui-btn"mode="region" :value="region" @change="CityChange">
  4. <buttontype="default">城市选择器</button>
  5. </picker>
  6. </div>
  7. </template>
  8. <script>
  9. exportdefault{
  10. data(){
  11. return{
  12. region:['广东省','广州市','海珠区'],
  13. }
  14. },
  15. methods:{
  16. CityChange(e){
  17. console.log('选中的城市为:'+ e.mp.detail.value);
  18. }
  19. }
  20. }
  21. </script>
  22. <style>
  23. page {
  24. margin-top:100px;
  25. }
  26. </style>

?> 城市选择器与上面的日期选择器这些类似,看下示例代码应该就会明白。

效果

picker05

多级联动选择器

看了一下小程序的开发文档,好像没有发现可以直接实现多级联动的组件或者可选的 API(如果有,请打醒我),不过它提供了自定义选择器的组件picker-viewpicker-view-columnpicker-view-column相当于是选择器的每一列,并且picker-view-column之间的数据都是独立的,而且picker-view提供了bindchange属性,那么就可以根据触发bindchange事件返回的值来判断哪一列发生了改变,从而再实时设置其他列的数据。这就是实现多级联动的思路。

mpvue中实现的代码如下(样式代码详情在 pages/mulLinkagePicker/index.vue):

  1. <template>
  2. <divclass="page">
  3. <div :class="{'pickerMask':isShowMask}"></div>
  4. <buttontype="default" @click="showPickerView">多级联动选择</button>
  5. <divclass="weui-picker" :class="{'weui_picker_view_show':pickerShow}">
  6. <divclass="weui-picker__hd">
  7. <divhref="javascript:;"class="weui-picker__action" @click="pickerCancel">取消</div>
  8. <divhref="javascript:;"class="weui-picker__action" @click="pickerConfirm">确定</div>
  9. </div>
  10. <picker-viewindicator-style="height: 40px;" :value="pickerValue"class="weui_picker_view" @change="pickerChange">
  11. <picker-view-column>
  12. <divclass="picker-item"v-for="item in columuOne" :key="index">{{item}}</div>
  13. </picker-view-column>
  14. <picker-view-column>
  15. <divclass="picker-item"v-for="item in columnTwo" :key="index">{{item}}</div>
  16. </picker-view-column>
  17. </picker-view>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. import mulLinkAgeArray from '../../../static/js/mulLinkAgeArray'
  23. exportdefault{
  24. data(){
  25. return{
  26. pickerShow:false,
  27. isShowMask:false,
  28. pickerValue:[0,1],
  29. mulLinkAgeArray: mulLinkAgeArray.value,
  30. columuOne:[],
  31. columnTwo:[]
  32. }
  33. },
  34. mounted(){
  35. this._initPicker();
  36. },
  37. methods:{
  38. pickerChange(e){
  39. let _this =this;
  40. let value = e.mp.detail.value;
  41. // 如果是第一列滚动
  42. if(value[0]!== _this.pickerValue[0]){
  43. let columnTwoNew = _this.mulLinkAgeArray[value[0]].children;
  44. _this.columnTwo =[];
  45. for(let i =0; i < columnTwoNew.length; i++){
  46. _this.columnTwo.push(columnTwoNew[i].label);
  47. }
  48. _this.pickerValue = value;
  49. _this.pickerValue[1]=0;
  50. }
  51. // 如果第二列滚动
  52. if(value[1]!==this.pickerValue[1]){
  53. _this.pickerValue[1]= e.mp.detail.value[1];
  54. }
  55. console.log('选中的值为:'+ _this.mulLinkAgeArray[value[0]].label +'-'+ _this.mulLinkAgeArray[value[0]].children[value[1]].label);
  56. console.log('pickerValue:'+this.pickerValue);
  57. },
  58. pickerConfirm(){
  59. console.log('选中的值为:'+this.mulLinkAgeArray[this.pickerValue[0]].label +'-'+this.mulLinkAgeArray[this.pickerValue[0]].children[this.pickerValue[1]].label);
  60. console.log('pickerValue:'+this.pickerValue);
  61. this.isShowMask =false;
  62. this.pickerShow =false;
  63. },
  64. pickerCancel(){
  65. this.isShowMask =false;
  66. this.pickerShow =false;
  67. },
  68. showPickerView(){
  69. this.isShowMask =true;
  70. this.pickerShow =true;
  71. },
  72. _initPicker(){
  73. let _this =this;
  74. let mulLinkAgeArray =this.mulLinkAgeArray;
  75. for(let i =0; i < mulLinkAgeArray.length; i++){
  76. _this.columuOne.push(mulLinkAgeArray[i].label);
  77. }
  78. // 渲染第二列
  79. let columnTwoArray = mulLinkAgeArray[_this.pickerValue[0]].children;
  80. for(let i =0; i < columnTwoArray.length; i++){
  81. _this.columnTwo.push(columnTwoArray[i].label)
  82. }
  83. }
  84. }
  85. }
  86. </script>
  87. <style>
  88. </style>

效果

picker06

!> 这是二级联动,三级联动类似,其实就是处理这样一个逻辑:当某一列发生改变时,根据e.mp.detail.value的值来判断哪些列的数据需要改变,那么就将这些列的数据重新渲染一遍。

小结

这章主要说的是小程序中的各种控件,掌握了这些控件,相信在用mpvue开发小程序的时候就不会担心控件问题了。