关注前端 | 前端博客
当前位置: uni-app > popup插件-uniApp

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;
       
        &amp;.show {
            display: block;
            .mask{
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
        }
        &amp;.hide {
            .mask{
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
        }
        &amp;.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) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
5

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - popup插件-uniApp

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线