How does WeChat Mini Programs achieve this kind of page effect?


is similar to the modal box. A background view, and a content view, are absolutely located, and the z-index of the content is higher than the background

.
<view class="modal-bac"></view>
<view class="modal-content"></view>
//
.modal-bac{
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background: rgba(102,102,102,.5);
    z-index: 100;
}
.modal-content{
    margin: 0 95rpx;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    z-index: 101;
}

actually Mini Program is the same as html5. So many components are implemented in the same way.


is to make a normal floating layer


add a view, fixed positioning, which is covered with an image tag, and view sets a transparency


is basically view, plus a variety of positioning layouts


a crossed diagram, a transparent bottom block diagram, absolute positioning

.
Menu