前言
现在是2019年1月初，小程序官方还没有发布cover-input等组件，在map层级之上可操作的组件只有cover-view、cover-image
正文
map组件属于原生组件，层级最高，能在map层级之上可操作的组件只有cover-view、cover-image，现有需求在map组件上层浮现弹框，可选择（select）
小程序提供picker选择，但是在弹框modal上显然不符合需求，需要自己重新实现。
在cover-view标签里实现cover-select是根据点击事件控制select-list的显示和隐藏，在list中选中的item放到显示区
实现思路：
- 用一个cover-view显示选择的内容，没有选择时显示初始化内容；
- 给显示内容的cover-view绑定点击事件，控制选择list的显示和隐藏；
- 选择的内容最后放在显示内容的cover-view中；
使用data-*共同属性将选中的item传出
重点知识：
关于e.target和e.currentTarget的区别：
- e.target是返回触发事件的对象
- e.currentTarget返回的是绑定事件的对象
通常情况下target和currentTarget是一致的，我们只要使用target即可，但有一种情况必须区分这两者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象
核心代码：
<!-- cover-select实现伪代码 -->
<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实现伪代码 -->
.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 组件的可选项
selectModel: '选择', // cover-view 显示的选中的内容
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;'
})
}
})
效果图：
初始化状态：
初始状态
选择时：
选择时
选择后：
选择后
备注
源码请点：
cover-select源码
系列文章：
「小程序」map组件层级之上实现cover-input
「小程序」map组件层级之上实现cover-process-control
【敬请期待】
