小程序 手写picker

小程序手写picker可以通过以下步骤实现：

1. 在wxml文件中定义一个picker组件，设置其mode属性为"selector"或"multi-selector"，并设置其range属性为一个数组，用于展示picker中的选项。

2. 在js文件中获取该picker组件，并通过setData方法将range数组设置为需要展示的选项数组。

3. 在wxml文件中定义一个button组件，设置其bindtap属性为一个自定义函数，在该函数中调用picker组件的show方法，使picker弹出。

4. 在js文件中定义一个自定义函数，用于处理picker中选项的选择。可以通过picker组件的bindchange属性来监听选项的变化，并将选中的选项通过setData方法存储起来。

5. 在wxml文件中通过{{}}语法将选中的选项展示出来。

以下是一个简单的手写picker实现代码示例：

<!--wxml文件-->
<view>
  <picker mode="selector" range="{{pickerData}}" bindchange="onPickerChange">
    <button bindtap="showPicker">{{selectedData}}</button>
  </picker>
</view>

<!--js文件-->
Page({
  data: {
    pickerData: ['选项1', '选项2', '选项3'],
    selectedData: ''
  },
  showPicker: function() {
    this.selectComponent('#picker').show();
  },
  onPickerChange: function(event) {
    const selectedIndex = event.detail.value;
    const selectedData = this.data.pickerData[selectedIndex];
    this.setData({
      selectedData: selectedData
    });
  }
});

在这个示例中，我们定义了一个mode为"selector"的picker组件，并将其range设置为一个包含三个选项的数组。当用户点击button组件时，调用showPicker函数弹出picker组件。当用户选择某个选项后，会触发onPickerChange函数，将选中的选项存储到selectedData中，并在button组件中展示出来。