wx 小程序 cover-view 覆盖在原生组件之上的文本视图

cover-view

覆盖在原生组件之上的文本视图,可覆盖的原生组件包括mapvideocanvascamera,只支持嵌套cover-viewcover-image

以map 为例:

wxml: 将cover-view 放到map标签里面

class="page-body">
  class="page-section page-section-gap">
    id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location>
  
  class="btn-area">
    
    

    class="modal-dialog" wx:if="{{showModal}}">
      class="modal-title">提示
      class="modal-content">注册后可获得更多优质服务
      class="modal-footer">
        class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定
        class="btn-cancel" bindtap="onCancel" data-status="cancel">取消
      
    
  

js:

Page({
   data: {
      showModal: false,
   },
    /**
    * 弹窗
    */
   showDialogBtn: function () {
      this.setData({
         showModal: true
      })
   },

   hideModal: function () {
      this.setData({
         showModal: false
      });
   },
   onCancel: function () {
      this.hideModal();
   },
   onConfirm: function () {
      this.hideModal();
   }
});

wxss:

/**弹框**/
.modal-dialog {
    width: 451rpx;
    height: 321rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background-color:rgba(0,0,0,0.8);
    margin: -180rpx 150rpx;
    border-radius: 6rpx;
}
.modal-title {
    padding-left: 38rpx;
    padding-top: 24rpx;
    color: #ffffff;
    text-align: left;
}

.modal-content{
    padding-top: 30rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
}

.modal-footer {
    padding-top: 60rpx;
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 0px solid rgba(0,0,0,0.8);
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-confirm {
    margin-left: 57rpx;
    width: 134rpx;
    height: 68rpx;
    line-height: 68rpx;
    color: #ffffff;
    font-size: 32rpx;
    text-align: center;

    background-color: #146755;
    border-radius: 33rpx;
}
.btn-cancel {
    text-align: center;
    margin-left: 60rpx;
    width: 134rpx;
    height: 68rpx;
    line-height: 68rpx;
    color: #333333;
    font-size: 32rpx;

    background-color: #cccccc;
    border-radius: 33rpx;
}

效果:

wx 小程序 cover-view 覆盖在原生组件之上的文本视图_第1张图片

你可能感兴趣的:(小程序)