重寫微信小程序原生picker組件

weChat-picker

微信小程序下彈選擇器

 

為什么寫這個

官方的的太丑了

 

組件的引入方式

官方文檔

 

GitHub地址

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

 

效果

 

引入

  將/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: 如果看着不順眼，那就直接到組件里去去改樣式吧