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

多列选择器

示例代码

<template>
  <div class="page">
    <picker class="weui-btn" mode="multiSelector" @change="MultiPickerChange" :value="indexMulPicker" :range="multiArray">
      <button type="default">多列选择器</button>
    </picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexMulPicker: [0, 1, 1],
      multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    }
  },
  methods: {
    MultiPickerChange(e) {
      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]])
    },
  }
}
</script>

<style>
page {
  margin-top: 100px;
}
</style>

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

效果

picker02

时间选择器

示例代码：

 <template>
  <div class="page">
    <picker class="weui-btn" mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
      <button type="default">时间选择器</button>
    </picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '12:01',
    }
  },
  methods: {
    TimeChange(e) {
      console.log('选中的时间为：' + e.mp.detail.value);
    },
  }
}
</script>

<style>
page {
  margin-top: 100px;
}
</style>

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

效果

picker03

日期选择器

示例代码

<template>
  <div class="page">
    <picker class="weui-btn" mode="date" :value="date" start="1999-01-01" end="2099-01-01" @change="DateChange">
      <button type="default">日期选择器</button>
    </picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2016-09-01',
    }
  },
  methods: {
    DateChange(e) {
      console.log('选中的日期为：' + e.mp.detail.value);
    },
  }
}
</script>

<style>
page {
  margin-top: 100px;
}
</style>

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

效果

picker04

城市选择器

示例代码：

<template>
  <div class="page">
    <picker class="weui-btn" mode="region" :value="region" @change="CityChange">
      <button type="default">城市选择器</button>
    </picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      region: ['广东省', '广州市', '海珠区'],
    }
  },
  methods: {
    CityChange(e) {
      console.log('选中的城市为：' + e.mp.detail.value);
    }
  }
}
</script>

<style>
page {
  margin-top: 100px;
}
</style>

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

效果

picker05

多级联动选择器

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

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

<template>
  <div class="page">
    <div :class="{'pickerMask':isShowMask}"></div>
    <button type="default" @click="showPickerView">多级联动选择</button>
    <div class="weui-picker" :class="{'weui_picker_view_show':pickerShow}">
      <div class="weui-picker__hd">
        <div href="javascript:;" class="weui-picker__action" @click="pickerCancel">取消</div>
        <div href="javascript:;" class="weui-picker__action" @click="pickerConfirm">确定</div>
      </div>
      <picker-view indicator-style="height: 40px;" :value="pickerValue" class="weui_picker_view" @change="pickerChange">
        <picker-view-column>
          <div class="picker-item" v-for="item in columuOne" :key="index">{{item}}</div>
        </picker-view-column>
        <picker-view-column>
          <div class="picker-item" v-for="item in columnTwo" :key="index">{{item}}</div>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script>
import mulLinkAgeArray from '../../../static/js/mulLinkAgeArray'
export default {
  data() {
    return {
      pickerShow: false,
      isShowMask: false,
      pickerValue: [0, 1],
      mulLinkAgeArray: mulLinkAgeArray.value,
      columuOne: [],
      columnTwo: []
    }
  },
  mounted() {
    this._initPicker();
  },
  methods: {
    pickerChange(e) {
      let _this = this;
      let value = e.mp.detail.value;
      // 如果是第一列滚动
      if (value[0] !== _this.pickerValue[0]) {
        let columnTwoNew = _this.mulLinkAgeArray[value[0]].children;
        _this.columnTwo = [];
        for (let i = 0; i < columnTwoNew.length; i++) {
          _this.columnTwo.push(columnTwoNew[i].label);
        }
        _this.pickerValue = value;
        _this.pickerValue[1] = 0;
      }
      // 如果第二列滚动
      if (value[1] !== this.pickerValue[1]) {
        _this.pickerValue[1] = e.mp.detail.value[1];
      }
      console.log('选中的值为：' + _this.mulLinkAgeArray[value[0]].label + '-' + _this.mulLinkAgeArray[value[0]].children[value[1]].label);
      console.log('pickerValue：' + this.pickerValue);
    },
    pickerConfirm() {
      console.log('选中的值为：' + this.mulLinkAgeArray[this.pickerValue[0]].label + '-' + this.mulLinkAgeArray[this.pickerValue[0]].children[this.pickerValue[1]].label);
      console.log('pickerValue：' + this.pickerValue);
      this.isShowMask = false;
      this.pickerShow = false;
    },
    pickerCancel() {
      this.isShowMask = false;
      this.pickerShow = false;
    },
    showPickerView() {
      this.isShowMask = true;
      this.pickerShow = true;
    },
    _initPicker() {
      let _this = this;
      let mulLinkAgeArray = this.mulLinkAgeArray;
      for (let i = 0; i < mulLinkAgeArray.length; i++) {
        _this.columuOne.push(mulLinkAgeArray[i].label);
      }
      // 渲染第二列
      let columnTwoArray = mulLinkAgeArray[_this.pickerValue[0]].children;
      for (let i = 0; i < columnTwoArray.length; i++) {
        _this.columnTwo.push(columnTwoArray[i].label)
      }
    }
  }
}
</script>

<style>

</style>

效果

picker06

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

小结

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