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>
  8. <script>
  9. export default {
  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

多列选择器

示例代码

<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就行了,你也可以设置startend或者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-viewpicker-view-columnpicker-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开发小程序的时候就不会担心控件问题了。