小程序 自定义picker组件

要自定义picker组件，可以按照以下步骤进行：

1. 创建一个自定义组件，在组件内部创建一个picker组件。
2. 在组件的js文件中，定义需要传递给picker组件的属性和方法。
3. 在组件的wxml文件中，使用picker组件，并绑定对应的属性和方法。
4. 在使用自定义组件的页面中，引入自定义组件，并传递需要的属性和方法。

以下是一个简单的自定义picker组件的示例代码：

1. 创建自定义组件

// components/custom-picker/custom-picker.js

Component({
  properties: {
    // 定义需要传递给picker组件的属性
    range: {
      type: Array,
      value: []
    },
    value: {
      type: Number,
      value: 0
    }
  },

  methods: {
    // 定义需要传递给picker组件的方法
    onChange(event) {
      const { value } = event.detail;
      this.triggerEvent('change', { value });
    }
  }
})

2. 在组件的wxml文件中使用picker组件

<!-- components/custom-picker/custom-picker.wxml -->

<view class="picker-container">
  <picker 
    mode="selector" 
    bindchange="onChange" 
    :range="{{ range }}" 
    :value="{{ value }}"
  >
    <view class="picker-value">{{ range[value] }}</view>
  </picker>
</view>

3. 在使用自定义组件的页面中引入并使用

<!-- pages/index/index.wxml -->

<custom-picker 
  range="{{ ['选项一', '选项二', '选项三'] }}" 
  value="{{ 0 }}" 
  bind:change="onPickerChange"
></custom-picker>

在页面的js文件中定义onPickerChange方法，接收自定义picker组件传递的value值。

这样就可以实现自定义picker组件了。注意，在实际开发中，还需要根据具体的需求进行样式和功能的定制。