微信小程序 手写picker组件

手写Picker组件主要包括以下几个步骤：

1. 创建一个组件文件夹，命名为picker，并在该文件夹下创建两个文件：picker.wxml 和 picker.js。

2. 在 picker.js 中定义组件的属性和方法，包括：

- properties: 定义传入组件的属性，如选项数组、默认选中值等。
- data: 定义组件内部的数据，如选中的值、是否显示等。
- methods: 定义组件的方法，如打开/关闭选择器、选择某一项等。

3. 在 picker.wxml 中编写组件的结构和样式，包括：

- 使用<view>标签包裹整个组件，并设置样式；
- 根据传入的选项数组，使用<scroll-view>标签渲染出所有选项，并设置样式；
- 根据选中的值，使用<view>标签显示当前选中的项，并设置样式；
- 可以使用<cover-view>标签覆盖在滚动列表上面，实现点击遮罩关闭选择器的效果。

4. 在外部页面中引用该组件，并传入选项数组等属性。

下面是一个简单的手写Picker组件代码示例：

picker.js

Component({
  // 组件的属性列表
  properties: {
    options: {
      type: Array,
      value: []
    },
    value: {
      type: String,
      value: ''
    }
  },
  // 组件的初始数据
  data: {
    showPicker: false,
    selectedIndex: 0,
    selectedValue: ''
  },
  // 组件的方法列表
  methods: {
    // 打开选择器
    openPicker: function() {
      this.setData({
        showPicker: true
      });
    },
    // 关闭选择器
    closePicker: function() {
      this.setData({
        showPicker: false
      });
    },
    // 选择某一项
    selectItem: function(e) {
      var index = e.currentTarget.dataset.index;
      var value = this.data.options[index].value;
      this.setData({
        selectedIndex: index,
        selectedValue: value
      });
      this.triggerEvent('change', { value: value });
    }
  }
})

picker.wxml

<view class="picker">
  <view class="mask" wx:if="{{showPicker}}" bindtap="closePicker"></view>
  <view class="picker-container" wx:if="{{showPicker}}">
    <scroll-view class="options" scroll-y="true">
      <view class="option" wx:for="{{options}}" wx:key="{{index}}" data-index="{{index}}" bindtap="selectItem">{{item.label}}</view>
    </scroll-view>
    <view class="selected" bindtap="closePicker">{{selectedValue}}</view>
  </view>
  <view class="trigger" bindtap="openPicker">{{selectedValue}}</view>
</view>

picker.wxss

.picker {
  position: relative;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.picker-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}

.options {
  max-height: 200rpx;
  overflow-y: scroll;
}

.option {
  padding: 10rpx;
}

.selected {
  padding: 10rpx;
  font-size: 16rpx;
  text-align: center;
  border-top: 1rpx solid #eee;
}

.trigger {
  padding: 10rpx;
  font-size: 16rpx;
  text-align: center;
  border-top: 1rpx solid #eee;
}