前言

現(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)彈框，可實(shí)現(xiàn)表達(dá)進(jìn)程控制的過程

在真機(jī)上原生input組件嵌在<cover-view />內(nèi)會(huì)被忽略導(dǎo)致

實(shí)現(xiàn)思路：

• 每一個(gè)過程數(shù)據(jù)循環(huán)出來，每條數(shù)據(jù)配一條豎線，調(diào)整位置，將它們連接起來；
• 通過css的class來控制改變后的狀態(tài)變化；
• 使用setInterval使過程按時(shí)間間隔變化；

核心代碼：

<!-- cover-process-control偽代碼實(shí)現(xiàn) -->
<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偽代碼實(shí)現(xiàn) -->

.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);
        
    }
})

效果圖：
初始化狀態(tài)：

初始化狀態(tài)

效果：

最終效果

備注

源碼請(qǐng)點(diǎn)：
cover-process-control源碼

系列文章：
「小程序」map組件層級(jí)之上實(shí)現(xiàn)cover-input
「小程序」map組件層級(jí)之上實(shí)現(xiàn)cover-select

【敬請(qǐng)期待】