前言
現(xiàn)在是2019年1月初，小程序官方還沒有發(fā)布cover-input等組件，在map層級(jí)之上可操作的組件只有cover-view、cover-image
正文
map組件屬于原生組件，層級(jí)最高，能在map層級(jí)之上可操作的組件只有cover-view、cover-image，現(xiàn)有需求在map組件上層浮現(xiàn)彈框，可選擇（select）
小程序提供picker選擇，但是在彈框modal上顯然不符合需求，需要自己重新實(shí)現(xiàn)。
在cover-view標(biāo)簽里實(shí)現(xiàn)cover-select是根據(jù)點(diǎn)擊事件控制select-list的顯示和隱藏，在list中選中的item放到顯示區(qū)
實(shí)現(xiàn)思路：
- 用一個(gè)cover-view顯示選擇的內(nèi)容，沒有選擇時(shí)顯示初始化內(nèi)容；
- 給顯示內(nèi)容的cover-view綁定點(diǎn)擊事件，控制選擇list的顯示和隱藏；
- 選擇的內(nèi)容最后放在顯示內(nèi)容的cover-view中；
使用data-*共同屬性將選中的item傳出
重點(diǎn)知識(shí)：
關(guān)于e.target和e.currentTarget的區(qū)別：
- e.target是返回觸發(fā)事件的對(duì)象
- e.currentTarget返回的是綁定事件的對(duì)象
通常情況下target和currentTarget是一致的，我們只要使用target即可，但有一種情況必須區(qū)分這兩者的關(guān)系，那就是在父子嵌套的關(guān)系中，父元素綁定了事件，單擊了子元素（根據(jù)事件流，在不阻止事件流的前提下他會(huì)傳遞至父元素，導(dǎo)致父元素的事件處理函數(shù)執(zhí)行），這時(shí)候currentTarget指向的是父元素，因?yàn)樗墙壎ㄊ录膶?duì)象，而target指向了子元素，因?yàn)樗怯|發(fā)事件的那個(gè)具體對(duì)象
核心代碼：
<!-- cover-select實(shí)現(xiàn)偽代碼 -->
<cover-view class="cover-select" style="{{selectHeight}}">
<cover-view class='selected' bindtap='tapSelect'>{{selectModel}}</cover-view>
<cover-view class='select-list'>
<cover-view class='select-item' style="{{ item.value === selectValue ? 'color:green' : ''}}" wx:for='{{selectList}}' wx:key='{{item.value}}' data-value='{{item.value}}' bindtap='chooseItem'>{{item.label}}</cover-view>
</cover-view>
</cover-view>
<!-- cover-select實(shí)現(xiàn)偽代碼 -->
.cover-select{
background-color: #ffffff;
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
border-radius: 5rpx;
padding: 0 15rpx;
}
.selected{
line-height: 40px;
}
.select-list {
overflow-y: scroll;
max-height: 120px;
}
.select-item{
line-height: 30px;
}
.select-item:hover{
background-color: #f2f2f2;
}
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
selectHeight: 'height: 40px', // select 組件的高度
selectList: [{
label: 'name',
value: '1'
}, {
label: 'age',
value: '2'
}, {
label: 'sex',
value: '3'
}, {
label: 'label',
value: '4'
}, {
label: 'value',
value: '5'
}], // select 組件的可選項(xiàng)
selectModel: '選擇', // cover-view 顯示的選中的內(nèi)容
selectValue:''
},
onReady: function(e) {
this.mapCtx = wx.createMapContext('myMap')
},
/**
* 顯示 Select
*/
tapSelect() {
this.setData({
selectHeight: 'max-height:200px;'
})
},
/**
* 初始化選中item
*/
itemChosen() {
},
/**
* 選擇 item
*/
chooseItem(e) {
console.log(e.target.dataset.value);
let value = e.target.dataset.value;
let item = this.data.selectList.find((item) => item.value === value);
this.setData({
selectValue:item.value,
selectModel: item.label,
selectHeight: 'height:40px;'
})
}
})
效果圖：
初始化狀態(tài)：
選擇時(shí)：
選擇后：
備注
源碼請(qǐng)點(diǎn)：
cover-select源碼
系列文章：
「小程序」map組件層級(jí)之上實(shí)現(xiàn)cover-input
「小程序」map組件層級(jí)之上實(shí)現(xiàn)cover-process-control
【敬請(qǐng)期待】
