小程序自定义select

需求：微信小程序有个picker组件，却没有h5中的select。此组件应景而生。

**

自定义select

：**
JSON：

{
  "component": true, 
  "usingComponents": {}  
}

WXML：

<view class='width-100p'style="position:relative">
  <view class=' selectParent' catchtap='showItemData'>
    <text class='flex-1'>{{selectItemContent}}</text>
    <image class='image' src='http://nsr.9hive.cn/global/minprogram/jnby/icon_item.svg' style='transform:rotate(90deg)'></image>

  </view>
  <view class='selectContainer' hidden="{{showDropItem}}">
    <block wx:for="{{itemList}}" wx:for-item="selectItem" wx:for-index="selectItemIndex" wx:key="selectItemIndex">
      <view class='selectItem' data-selectItem="{{selectItem}}" catchtap='selectItem'>{{selectItem.name}}</view>
    </block>


  </view>
  <!-- <view class='shade'></view> -->
</view>

WXJS：

Component({
  properties: {
    itemList: {
      type: Array,
      value: "",
      observer: function (newVal, oldVal) { }
    },

  },
  data: {
    showDropItem: true,
    selectItemContent: "请选择"
  },
  methods: {
    showItemData() {
      this.setData({
        showDropItem: !this.data.showDropItem
      })
    },
    selectItem(e) {
      // console.log(e)
      let item = e.currentTarget.dataset.selectitem;
      this.setData({
        showDropItem: true,
        selectItemContent: item.name
      })
      this.triggerEvent("selectItem", item);//自定义方法,传值。传到使用页面时，通过e.detail拿取
    }
  }
})

调用方法：
在需要调用的页面JSON里配置组件路径及名称：

{
  "navigationBarTitleText": "不止盒子",
  "usingComponents": {
    "component-select":"../select/select"
  }
}

页面中使用