前言
现在是2019年1月初，小程序官方还没有发布cover-input等组件，在map层级之上可操作的组件只有cover-view、cover-image
正文
map组件属于原生组件，层级最高，能在map层级之上可操作的组件只有cover-view、cover-image，现有需求在map组件上层浮现弹框，可实现表达进程控制的过程
在真机上原生input组件嵌在<cover-view />内会被忽略导致
实现思路：
- 每一个过程数据循环出来，每条数据配一条竖线，调整位置，将它们连接起来；
- 通过css的class来控制改变后的状态变化；
- 使用setInterval使过程按时间间隔变化；
核心代码：
<!-- cover-process-control伪代码实现 -->
<cover-view class='cover-process-control'>
<cover-view class='control-wrapper'>
<cover-view wx:for='{{texts}}' wx:key='{{item}}'>
<cover-view class='row'>
<cover-view class="{{active>=index?'icon active':'icon noactive'}}"></cover-view>
<cover-view class='text'>{{item}}</cover-view>
</cover-view>
<cover-view class='line' wx:if='{{index!=texts.length-1}}'></cover-view>
</cover-view>
</cover-view>
</cover-view>
<!-- cover-process-control伪代码实现 -->
.cover-process-control{
width: 80%;
padding: 10rpx 20rpx;
background-color: #ffffff;
position: relative;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
.control-wrapper{
height: 100%;
}
.row{
width: 100%;
font-size: 14px;
}
.icon{
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
}
.noactive{
background-color: #dddddd;
}
.active{
background-color: green;
}
.text{
display: inline-block;
vertical-align: middle;
padding-left: 10rpx;
}
.line{
width: 1px;
height: 25px;
background-color: #dddddd;
margin-left: 8px;
}
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
texts: ['开始收集附近信息',
'正在扫描',
'记录信息中',
'收集完毕'
],
active: -1
},
onReady: function(e) {
this.mapCtx = wx.createMapContext('myMap');
this.changeActive();
},
changeActive() {
let setIntervals = setInterval(() => {
this.setData({
active: this.data.active + 1
});
if (this.data.active >= this.data.texts.length-1) {
clearInterval(setIntervals);
}
}, 2000);
}
})
效果图：
初始化状态：
初始化状态
效果：
最终效果
备注
源码请点：
cover-process-control源码
系列文章：
「小程序」map组件层级之上实现cover-input
「小程序」map组件层级之上实现cover-select
【敬请期待】
