cover-view
覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map
、video
、canvas
、camera
,只支持嵌套cover-view
、cover-image
。
以map 为例:
wxml: 将cover-view 放到map标签里面
<view class="page-body"> <view class="page-section page-section-gap"> <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location></map> </view> <view class="btn-area"> <!--弹窗--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <cover-view class="modal-dialog" wx:if="{{showModal}}"> <cover-view class="modal-title">提示</cover-view> <cover-view class="modal-content">注册后可获得更多优质服务</cover-view> <cover-view class="modal-footer"> <cover-view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</cover-view> <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</cover-view> </cover-view> </cover-view> </view> </view>
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; }
效果: