小程序弹出层
小程序多用弹出层!
WXML
<view class="pop pop-{{type}} {{show ? 'pop-show' : ''}}">
<view wx:if="{{overlay}}" class="pop_mask {{showOverlay ? '' : 'pop_mask-hide'}}" bindtap="handleMaskClick">
</view>
<view class="pop_container">
<slot></slot>
</view>
</view>
CSS
.pop {
visibility: hidden
}
.pop-show {
visibility: visible
}
.pop_mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 14;
background: rgba(0, 0, 0, .5);
display: none;
}
.pop_mask-hide {
background: none;
}
.pop_container {
position: fixed;
transition: all .2s ease;
z-index: 15;
opacity: 0;
}
.pop-show .pop_container {
opacity: 1;
}
.pop-show .pop_mask {
display: block;
}
.pop-left .pop_container {
left: 0;
top: 50%;
transform: translate3d(-100%, -50%, 0);
}
.pop-show.pop-left .pop_container {
transform: translate3d(0, -50%, 0);
}
.pop-right .pop_container {
right: 0;
top: 50%;
left: auto;
transform: translate3d(100%, -50%, 0);
}
.pop-show.pop-right .pop_container {
transform: translate3d(0, -50%, 0);
}
.pop-bottom .pop_container {
top: auto;
left: 50%;
bottom: 0;
transform: translate3d(-50%, 100%, 0);
}
.pop-show.pop-bottom .pop_container {
transform: translate3d(-50%, 0, 0);
}
.pop-top .pop_container {
top: 0;
left: 50%;
transform: translate3d(-50%, -100%, 0);
}
.pop-show.pop-top .pop_container {
transform: translate3d(-50%, 0, 0);
}
JS
Component({
properties: {
show: {
type: Boolean,
value: false
},
// 是否显示遮罩层
overlay: {
type: Boolean,
value: true,
},
// 遮罩层是否显示透明黑色
showOverlay: {
type: Boolean,
value: true,
},
type: {
type: String,
value: 'bottom'
},
},
methods: {
handleMaskClick(){
this.triggerEvent('clickmask')
}
}
})
DOME地址
gitee地址https://gitee.com/nantianbaiyun/popup.git