微信小程序 picker组件封装

一直觉得小程序的picker组件用起来步骤很繁琐，于是就自己封装了一个组件，简直不要太好用

组件：

wxml:

<picker bindchange="pickerChangeFun" value="{{chooseIndex}}" range="{{options}}" range-key="{{'name'}}">
  <view>
    <text style="color:{{chooseIndex>=0?'#131C2C':'rgba(203,212,221,0.5);'}}">{{chooseIndex>=0?options[chooseIndex].name:placeholder}}</text>
  </view>
</picker>

js:

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    options:{
      type:null,
      value:[],
    },
    initId:{
      type:null,
      value:0,
    },
    placeholder:{
      type:null,
      value:'',
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    chooseIndex:-1
  },
  observers: {
    'options, initId': function(options, initId) {
      if(options.length > 0 && (initId||initId === 0)){
        options.forEach((item,index)=>{
          if(item.id == initId){
            this.setData({
              chooseIndex:index
            })
          }
        })
      }else{
        this.setData({
          chooseIndex:-1
        })
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    pickerChangeFun(e){
      let index = e.detail.value;
      let chooseItem = this.properties.options[index];//选中的项
      this.setData({
        chooseIndex:index
      })
      this.triggerEvent("pickerChange", chooseItem)
    }
  },
  ready:function(){}
})

样式什么的可以自己往上加

使用的时候：

先在页面的json文件里的'usingComponents'引一下

"usingComponents": {
    "picker-pack":"/components/picker-pack/index"
  },

wxml：

<picker-pack options="{{statusList?statusList:[]}}" initId="{{chooseStatus}}" placeholder='请选择客户状态' bind:pickerChange="bindStatusChange"></picker-pack>

js：

这里一共有 三个参数和一个

bindStatusChange: function (e) {
    console.log(e.detail)
  },

方法

options ：是选项数组  要用name 和 id 这两个字段   当然也可以用自己的字段 但是要把组件里的改一下

initId ：是默认选中的项的id值，把默认选中项的id值传进去就会自动显示id值对应的名字

placeholder ：是没有选中值时显示的提示语

pickerChange ：e.detail 就是选中的项的 name和id

(chooseIndex:-1 在开发者工具上看上去有点别扭，但是在真机上是完全没问题的)

诶嘿嘿~