uni-app官方的popup弹出层用户体验不是很好,没有过渡效果,显的很生硬,有时候为了不给自己找麻烦,也不让项目或是产品经理有机会找麻烦,自己先把麻烦解决掉,能咋办呢,自己扩展个呗!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
| <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> |
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - popup插件-uniApp