重写微信小程序原生picker组件

weChat-picker

微信小程序下弹选择器

为什么写这个

官方的的太丑了

组件的引入方式

官方文档

GitHub地址

https://github.com/loo41/weChat-picker

效果

扫描二维码关注公众号，回复： 2106392 查看本文章

引入

  将/pages/component/picker按组件引入既可以

使用

  <picker
    bind:sure="_sure" 
    bind:close="_close" 
    pickData="{{listData}}" 
    open="{{openPicker}}"
    sureStyle=""
    cancelStyle=""
  />

  data: {
    openPicker: false,
    listData: {
      years: ['2018年', '2017年', '2016年', '2015年'], months: ['12月', '11月', '10月', '9月', '8月', '7月', '6月'], days: ['1天', '2天', '3天', '4天', '5天', '6天', '7天', '8天'] }, } _sure (e) { let data = e.detail console.log(e.detail) if (JSON.stringify(e.detail) === '[]') { this.setData({openPicker: false}) return } let {value} = this.data value = data.join('') this.setData({ openPicker: false, value }) console.log('点击了确定') }, _close (e) { console.log(e.detail) this.setData({openPicker: false}) console.log('点击了取消') }, _openPick () { this.setData({openPicker: true}) }

使用

Props

名称	类型	是否必须	说明
sure	Function	是	点击确定返回的事件
close	Function	是	点击取消返回的事件
pickData	Object	是	数据对象, 参考使用
open	Boolean	是	控制开启或关闭picker
sureStyle-cancelStyle	String	否	按钮样式

其他

1: pickData对象可以任意定制，只要和是对象-数组既可
2: open参数记得每次回调完，一定设置为false，不然下次就打不开
3: 如果看着不顺眼，那就直接到组件里去去改样式吧