【经验分享】 自定义picker组件，拿走即用。

Component({
  data: {},
  props: {
    pickerIndex: [], // 默认选中下标
    show: false, // 是否显示
    list: [], // 列表
    title: '' // 标题
  },
  methods: {
    // 取消按钮点击
    handlePickerCancle() {
      this.props.onCancle()
    },
    // 确定按钮点击
    handlePickerConfirm() {
      this.props.onConfirm({ key: this.data.pickerKey, value: this.data.pickerValue })
    },
    // picker切换
    handlePickerChange(e) {
      this.setData({
        pickerKey: e.detail.value[0],
        pickerValue: this.props.list[e.detail.value]
      })
    }
  }
})

<qts-picker title="{{title}}" show="{{show}}" list="{{list}}" pickerIndex="{{index}}" onCancle="handleClick" onConfirm="handleConfirm" />

Page({
  data: {
    show: false, // 是否显示picker
    title: '薪资单位', // picker标题
    index: [2], // 默认选中第几项
    list: ['日','周','月','季','年'],
    key: '',
    value: ''
  },
  handleClick() {
    this.setData({
      show: !this.data.show
    })
  },
  handleConfirm(e) {
    console.log(e)
    this.setData({
      key: e.key,
      value: e.value
    })
    this.handleClick()
  }
})