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

前言

现在是2019年1月初,小程序官方还没有发布cover-input等组件,在map层级之上可操作的组件只有cover-viewcover-image

正文

map组件属于原生组件,层级最高,能在map层级之上可操作的组件只有cover-viewcover-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

【敬请期待】

推荐阅读更多精彩内容