微信小程序自定义时间日期组件

起因

为了不重复造轮子在网上找了一些自定义的时间代码但是都没有写成组件，感觉很不方便

官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

组件使用

• 组件引用

{
  "usingComponents": {
    "tqhPciker":"/components/tqhPicker/tqhPicker"
  }
}

• 组件wxml

<picker class='time-picker' mode="multiSelector" bindchange="bindStartMultiPickerChange" bindtap='pickerTap' bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><slot></slot></picker>

注意<slot></slot>的位置，这是你放入组件内控件的位置

• 页面wxml

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <tqhPciker bindmyevent="onMyEvent">
  <view>{{pikerStr}}</view>
  </tqhPciker>
</view>

组件事件的传递

• tqhPicker.js

    const myEventDetail = { chooseDate: startDate } // detail对象，提供给事件监听函数
    const myEventOption = {} // 触发事件的选项
    this.triggerEvent('myevent', myEventDetail, myEventOption)

• index.wxml

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <tqhPciker bindmyevent="onMyEvent">
  <view>{{pikerStr}}</view>
  </tqhPciker>
</view>

其中myevent是自己定义的方法

• index.js

  onMyEvent:function(e){
    console.log(e);
    this.setData({
      pikerStr: e.detail.chooseDate
    });
  }

效果图

EC7DFF49-E7BC-45D1-AD5E-18F86737B053.png

代码地址

https://github.com/tqhnet/wx_tqhPickerDemo