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>