Picker

选择器

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

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

单列选择器

示例代码：

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

tip

!> 1. bindchange 在mvp中要写成：@change，以及一些要进行绑定的属性要写成:value的形式

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

效果

picker01

多列选择器

示例代码

  1. <template>
  2.   <div class="page">
  3.     <picker class="weui-btn" mode="multiSelector" @change="MultiPickerChange" :value="indexMulPicker" :range="multiArray">
  4.       <button type="default">多列选择器</button>
  5.     </picker>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       indexMulPicker: [0, 1, 1],
  14.       multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
  15.     }
  16.   },
  17.   methods: {
  18.     MultiPickerChange(e) {
  19.       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]])
  20.     },
  21.   }
  22. }
  23. </script>
  25. <style>
  26. page {
  27.   margin-top: 100px;
  28. }
  29. </style>

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

效果

picker02

时间选择器

示例代码：

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

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

效果

picker03

日期选择器

示例代码

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

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

效果

picker04

城市选择器

示例代码：

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

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

效果

picker05

多级联动选择器

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

在mpvue中实现的代码如下（样式代码详情在 pages/mulLinkagePicker/index.vue）：

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

效果

picker06

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

小结

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