小程序自定义组件（结合vant weapp）------Picker

*本组件需要配合有赞小程序组件来使用，如未引入，请移步：http://vant-contrib.gitee.io/vant-weapp/#/popup

组件目的

有赞本身的picker组件，需要搭配弹出层使用，单页面使用组件时，需要写弹出层的展示与关闭，数据的变化赋值，相对来说较为麻烦，此自定义组件的目的，在于精简操作。

组件结构

与小程序本身的页面结构无异，分为四个文件

.JS

import util from '../../utils/util'
Component({behaviors: ['wx://form-field'],properties: {//选项picker: {type: Array,value: ['未设置数据'],},//默认选中值value: {type: String,value: '未设置数据'},//选项卡类型type: {type: String,value: 'normal'},//箭头方向arrowdirection: {type: String,value: ''},//如果是多级选择，选项值的格式pickers: {type: Object,value: {浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],福建: ['福州', '厦门', '莆田', '三明', '泉州'],}}},data: {//起始选择日期minDate: new Date(2019, 0, 1).getTime(),//当前日期currentDate: new Date().getTime(),//默认选择时间currentTime: '12:00',//多级选择的数据预留columns: [],},methods: {//展示弹窗showPopup(e) {this.setData({show: true});},//隐藏弹窗onClose() {this.setData({show: false});},//监听选项值数据改变onChange(event) {let data = event.detail.valuethis.setData({value: data})this.triggerEvent("change", {data})},//多级选择时，监听数据改变onChanges(event) {let data = event.detail.valuethis.setData({value: data})event.detail.picker.setColumnValues(1, this.data.pickers[event.detail.value[0]]);this.triggerEvent("change", {data})},//点击确认按钮onConfirm(event) {let data = event.detail.valuethis.setData({value: data,show: false})this.triggerEvent("change", {data})},//当类型为日期选择时的监听数据变化onInput(event) {let data = util.formatDate(new Date(event.detail))this.setData({value: data,});this.triggerEvent("change", {data})},//当类型为时间选择时的监听数据变化onInputTime(event) {let data = event.detailthis.setData({value: data,});this.triggerEvent("change", {data})},},lifetimes: {//组件创建时响应函数attached: function () {if (this.data.type == 'MultiPicker') {//多级数据格式化var co = [{values: Object.keys(this.data.pickers),className: 'column1',},{values: this.data.pickers[Object.keys(this.data.pickers)[0]],className: 'column2',}]this.setData({columns: co})}},},
})

.JSON

{"component": true,"usingComponents": {"van-cell": "@vant/weapp/cell/index","van-popup": "@vant/weapp/popup/index","van-datetime-picker": "@vant/weapp/datetime-picker/index","van-picker": "@vant/weapp/picker/index"}
}

.WXML

<van-cell title="{
   {picker[0]}}" value="{
   {value}}" bind:click="showPopup" is-link arrow-direction="{
   {arrowdirection}}" />
<!-- 当为日期选择时 -->
<view wx:if="{
   {type=='date'}}"><van-popup show="{
   {show}}" round position="bottom" custom-style="height: 50%" bind:close="onClose"><van-datetime-picker type="date" value="{
   {currentDate}}" bind:input="onInput" min-date="{
   { minDate }}" /></van-popup>
</view>
<!-- 当为时间选择时 -->
<view wx:elif="{
   {type=='time'}}"><van-popup show="{
   {show}}" round position="bottom" custom-style="height: 50%" bind:close="onClose"><van-datetime-picker type="time" value="{
   {currentTime}}" bind:input="onInputTime" /></van-popup>
</view>
<!-- 当为多级选择时 -->
<view wx:elif="{
   {type=='MultiPicker'}}"><van-popup show="{
   {show}}" round position="bottom" custom-style="height: 50%" bind:close="onClose"><van-picker columns="{
   {columns}}" bind:change="onChanges" show-toolbar bind:confirm="onConfirm" /></van-popup>
</view>
<!-- 普通单列选择 -->
<view wx:else><van-popup show="{
   {show}}" round position="bottom" custom-style="height: 50%" bind:close="onClose"><van-picker columns="{
   {picker[1]}}" bind:change="onChange" show-toolbar bind:confirm="onConfirm" /></van-popup>
</view>

.WXSS

 //未配置，

使用该自定义组件

.JS

Page({data:{pickerarr: ['地区选择', ['北京', '上海', '广州', '深圳']],},onChange(event){console.log(event.detail.data)}
})

.JSON

{"usingComponents": {"zxy-picker":"../../components/picker"}
}

.WXML

<zxy-picker picker="{
   {pickerarr}}" value="{
   {VALUE}}" bind:change="onChange" arrowdirection="down" />

效果