微信小程序之控件封装（picker选择器）

因业务需求，为便于重用，封装了一个选择器，只需传入数组和初始值（可不传），方便调用：

1、生成对应的相关文件：

屏幕快照 2019-04-22 上午11.24.48.png

2、在json文件中，添加component：

demoPicker.json
{
  "component": true,
  "usingComponents": {}
}

dempPicker.js:

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
// title: {            // 属性名
    //   type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    //   value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    // },

    initValue: { // 初始化日期
      type: String,
      value: ''
    },

    items: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true, //是否显示
    
    setValues: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hiddeDatePicker: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showDatePicker() {
      this.setData({
        flag: !this.data.flag
      })
      this._getItems()
    },

    // 点击确定
    _confirm() {
      let item = this.data.items[this.data.setValues[0]]
      this.triggerEvent('confirm', item)
    },

    // 滑动  methods
    _bindChange(e) {
      console.log(e.detail.value)

    },

    // 获取初始化信息
    _getItems(e) {
      if (this.data.items.length && this.data.initValue) {
        let items = this.data.items
        for (let i = 0; i < items.length; i++) {
          if (this.data.initValue == items[i].id) {
            this.setData({
              setValues: [i]
            })
            return
          }
        }
      }
      this.setData({
        setValues: [0]
      })
    },

  },
})

demoPicker.wxml:

<view class="date-background" hidden="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view>
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker'>取消</view>
        <view bindtap='_confirm'>确定</view>
      </view>
      <picker-view
        indicator-style="height: 80rpx;"
        style="width: 100%; height: 430rpx;text-align: center"
        value="{{setValues}}"
        bindchange="_bindChange"
        bindpickend="_bindpickend"
      >
        <picker-view-column>
          <view wx:for="{{items}}" wx:key="*item" style="line-height: 80rpx">{{item.text}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

demoPicker.wxss:

.date-background {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
}

.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
}

.date-container {
  position: absolute;
  width: 100%;
  height: 500rpx;
  /* border: 2rpx solid #ccc;
  border-radius: 10rpx; */
  /* box-sizing: bordre-box; */
  overflow: hidden;
  background: #fff;
  bottom:0;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20rpx;
  font-size:28rpx;
  line-height: 70rpx;
  color:#60c48e;
}

以上封装类的操作就完成了，下面是如何引用，下面以addCalendar文件为例：
addCalendar.json:

{
  "usingComponents": {
    "demopicker": "/component/demoPicker/demoPicker"
  }
}

addCalendar.wxml:

<demopicker id='demopicker' 
    initValue='0'
    items='{{demoPickerSource}}'
    bind:confirm="_confirmeventtype">
</demopicker>

addCalendar.js:
在页面渲染出来后操作（当然也可以在onLoad中）

onReady: function () {
    this.demopicker = this.selectComponent("#demopicker");
  },

显示或者隐藏控件：

// 显示 选择控件
  showEventTypePicker() {
    this.demopicker.showDatePicker()
  },

  // 隐藏 选择控件
  hiddeEventTypePicker() {
    this.demopicker.hiddeDatePicker();
  },

点击确定时输出信息：

// demopicker 输出数据
  _confirmeventtype(e) {
    //console.log("_confirmeventtype:", e, e.detail)
   // 操作完成后记得收起控件哦
    this.hiddeEventTypePicker()
  },

此处需要说明的是，为了便于扩展，传入的数据源需要是[{id: '', text:''}]的格式哦，当然如有需要可以根据自己项目需求更改； bind:confirm="_confirmeventtype"此处是为了将控件中的方法和引用文件中的方法绑定，实现互通。在控件中有this.triggerEvent('confirm', item)这行代码，此处的confirm即上面的confirm，item为传递给confirmeventtype的信息数据。

最后编辑于：2019.07.27 09:19:32