「小程序」map组件层级之上实现cover-process-co

前言

现在是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

【敬请期待】