popup插件-uniApp

2019-05-26 分类：uni-app 作者：管理员阅读（2558）

uni-app官方的popup弹出层用户体验不是很好，没有过渡效果，显的很生硬，有时候为了不给自己找麻烦，也不让项目或是产品经理有机会找麻烦，自己先把麻烦解决掉，能咋办呢，自己扩展个呗！

<template>
<view class="content">
<button type="primary" @click="toggleSpec">开启POPUP</button>
<view
class="popup"
:class="specClass"
@touchmove.stop.prevent="stopPrevent"
@click="toggleSpec"
>

<view class="mask"></view>
<view class="layer attr-content" @click.stop="stopPrevent">

</view>
</view>
</view>
</template>
<script>

export default {
data() {
return {
specClass: 'none',
}
},
onLoad() {

},
methods: {
//弹窗开关
toggleSpec() {
if(this.specClass === 'show'){
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
}else if(this.specClass === 'none'){
this.specClass = 'show';
}
},
stopPrevent(){}
}
}
</script>
<style lang='scss'>
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;

&.show {
display: block;
.mask{
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
.mask{
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask{
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.3);
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
min-height: 40vh;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.btn{
height: 66upx;
line-height: 66upx;
border-radius: 100upx;
background:#fff;
font-size: 16upx;
color: #fff;
margin: 30upx auto 20upx;
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
</style>

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏