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

 

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

组件目的

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

组件结构

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

组件后缀	对应作用
.js	组件的逻辑实现，数据的传入传出都在此实现
.json	组件的一些配置，如引用其他组件等
.wxml	组件的页面结构，展现在前端的内容，都在此页进行配置
.wxss	组件的页面样式，可以对组件内的模块进行样式配置

.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.value
      this.setData({
        value: data
      })
      this.triggerEvent("change", {
        data
      })
    },
    //多级选择时，监听数据改变
    onChanges(event) {
      let data = event.detail.value
      this.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.value
      this.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.detail
      this.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" />

效果