微信小程序picker自定义下拉框弹窗样式

微信小程序中的Picker组件是一个内置的下拉框控件，它提供了一些默认样式和功能。如果需要自定义下拉框弹窗的样式，可以使用自定义组件实现。

以下是一个示例代码，演示如何使用自定义组件实现自定义下拉框弹窗样式：

1. 在小程序根目录下创建一个名为 "custom-picker" 的自定义组件文件夹，并在该文件夹下创建一个名为 "custom-picker.wxml" 的模板文件。

2. 在 custom-picker.wxml 文件中编写下拉框弹窗的结构和样式，例如：

<view class="picker-container">
  <view class="header">
    <text class="cancel" bindtap="onCancel">取消</text>
    <text class="title">{{title}}</text>
    <text class="confirm" bindtap="onConfirm">确定</text>
  </view>
  <picker class="picker" value="{{value}}" range="{{range}}" bindchange="onChange"></picker>
</view>

3. 在 custom-picker.js 文件中编写自定义组件的逻辑，例如：

Component({
  properties: {
    title: String,
    value: Number,
    range: Array
  },
  methods: {
    onCancel: function() {
      this.triggerEvent('cancel');
    },
    onConfirm: function() {
      this.triggerEvent('confirm', { value: this.data.value });
    },
    onChange: function(e) {
      this.setData({ value: e.detail.value });
    }
  }
});

4. 在使用该自定义组件的页面中，引入该组件并传入相应的属性，例如：

<custom-picker title="请选择" value="{{index}}" range="{{range}}" bind:cancel="onPickerCancel" bind:confirm="onPickerConfirm"></custom-picker>

5. 在页面的 js 文件中编写相应的逻辑，例如：

Page({
  data: {
    range: ['选项一', '选项二', '选项三'],
    index: 0
  },
  onPickerCancel: function() {
    // 取消选择
  },
  onPickerConfirm: function(e) {
    const value = e.detail.value;
    // 确认选择
  }
});

通过以上步骤，就可以实现自定义下拉框弹窗的样式和功能。需要注意的是，自定义组件的样式和逻辑都需要自行编写。