Micro-channel select applet drop-down box assembly

First, the source address

https://github.com/imxiaoer/WeChatMiniSelect

 

Second, the effect of FIG.

Poor record screen picture quality, so we will see the blur (Wulian)

 

Third, the components of the source

1. select.wxml

<view class="select-box">
  <view class="select-current" catchtap="openClose">
    <text class="current-name">{{current.name}}</text>
  </view>
  <view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
    <text class="option"
      data-id="{{defaultOption.id}}"
      data-name="{{defaultOption.name}}">{{defaultOption.name}}
    </text>
    <text class="option"
      wx:for="{{result}}"
      wx:key="{{item.id}}"
      data-id="{{item.id}}"
      data-name="{{item.name}}">{{item.name}}
    </text>
  </view>
</view>

 

Description: The catchtap without bindtap is to prevent the event from bubbling, in order to achieve the rest of the page, click Close select, so the parent page (index.wxml) outermost bound bindtap = "close" method, if not stop bubbling the method of execution will close the parent component

 

2. select.js

Component({
  properties: {
    options: {
      type: Array,
      value: []
    },
    defaultOption: {
      type: Object,
      value: {
        id: '000',
        name: '全部城市'
      }
    },
    key: {
      type: String,
      value: 'id'
    },
    text: {
      type: String,
      value: 'name'
    }
  },
  data: {
    result: [],
    isShow: false,
    current: {}
  },
  methods: {
    optionTap (E) { 
      the let DataSet = e.target.dataset
       the this .setData ({ 
        Current: DataSet, 
        isShow: to false 
      }); 

      // call the parent component method, and parameter passing 
      the this .triggerEvent ( "Change" , ... { } DataSet) 
    }, 
    OpenClose () { 
      the this .setData ({ 
        isShow: ! the this .data.isShow 
      }) 
    }, 

    // this method is invoked for the parent component 
    Close () {
       the this .setData ({ 
        isShow: to false 
      }) 
    } 
  } , 
  Lifetimes: { 
    attached () { 
      // attribute name conversion, if not {id: '', name: ''} format is converted to {id: '', name: ''} form 
      the let Result = []
       IF ( the this .data ! .key == 'ID' || the this .data.text == 'name'! ) {       
         for (the let Item of the this .data.options) { 
          the let {[ the this .data.key]: ID, [ the this . data.text]: name =} Item 
          result.push ({ID, name}) 
        } 
      } 
      the this .setData ({ 
        Current: Object.assign ({}, the this .data.defaultOption), 
        Result: Result 
      }) 
    } 
  } 
})

 

Description: properties in key and text to make the conversion attribute name. For example, I now the data is structured as follows:

[{ 
      City_id: '001' , 
      city_name: 'Beijing' 
    }, { 
      city_id: '002' , 
      city_name: 'Shanghai' 
    }, { 
      city_id: '003' , 
      city_name: 'Shenzhen' 
 }]

Select the component data structures are required:

[{ 
      The above mentioned id: '001' , 
      name: 'Beijing' 
    }, { 
      the above mentioned id: '002' , 
      name: 'Shanghai' 
    }, { 
      the above mentioned id: '003' , 
      name: 'Shenzhen' 
}]

So we're going to city_id converted into id, city_name converted into name. How to achieve conversion attribute name it? It is through the key and text of these two parameters.

 

3. select.json

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

 

4. select.wxss

.select-box {
  position: relative;
  width: 100%;
  font-size: 30rpx;
}

.select-current {
  position: relative;
  width: 100%;
  padding: 0 10rpx;
  line-height: 70rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 30rpx;
  content: '';
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.current-name {
  display: block;
  width: 85%;
  height: 100%;
  word-wrap: normal;
  overflow: hidden;
}

.option-list {
  position: absolute;
  left: 0;
  top: 76rpx;
  width: 100%;
  padding: 12rpx 20rpx 10rpx 20rpx;
  border-radius: 6rpx;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
  background-color: #fff;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  border-bottom: 1rpx solid #eee;
}

.option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

 

 Fourth, the use of components

index.wxml

<view class="container" bindtap="close">
  <view class="select-wrap">
    <select id="select" options="{{options}}" key="city_id" text="city_name" bind:change="change"></select>
  </view>
</view>