超好用的uniapp弹出层

uni-app 底部弹出弹窗能够动画效果

 

 

 

 

 

 

 

要点： 

 1. 动态控制css。

<view class="share-item" :class="{'share-show': shareState}">

 

 2. css里面设置优先级

// 进入分享动画
.share-show {
    transition: all 0.3s ease;
    transform: translateY(0%) !important;
}
// 离开分享动画
.share-item {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    transform: translateY(100%);
    z-index: 1999;
}

 

下面是分享组件的全部代码，share.vue文件。

<template>
    <view class="share">
        <view :class="{'share-box': shareState}" @click="handleHiddenShare">
        </view>
        <view class="share-item" :class="{'share-show': shareState}">
            <view class="share-to">
                <text>分享到</text>
            </view>
            <view class="content">
                <view class="block" v-for="(item, index) in shareList" :key="index">
                    <image :src="item.image" mode="aspectFill"></image>
                    <text>{{item.content}}</text>
                </view>
            </view>
            <view class="cancel" @click.stop="handleHiddenShare">
                <text>取消</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            
        },
        data() {
            return {
                shareList: [
                    {image: '/static/temp/share_wechat.png', content: '微信'},
                    {image: '/static/temp/share_moment.png', content: '朋友圈'}
                ],
                shareState: false,
            };
        },
        methods: {
            // 显示分享
            handleShowShare () {
                this.shareState = true;
            },
            // 隐藏分享
            handleHiddenShare () {
                this.shareState = false;
            }
        }
    }
</script>

<style lang="less">
    .share {
        width: 100%;
        height: 100%;
    }
    .share-box {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
        background-color: rgba(0, 0, 0, 0.4);
        transition: .3s;
        z-index: 999;
    }
    // 进入分享动画
    .share-show {
        transition: all 0.3s ease;
        transform: translateY(0%) !important;
    }
    // 离开分享动画
    .share-item {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        transition: all 0.3s ease;
        transform: translateY(100%);
        z-index: 1999;
        .share-to {
            width: 100%;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            &::after {
                content: '';
                width: 240rpx;
                height: 0rpx;
                border-top: 1px solid #E4E7ED;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                margin-left: 30rpx;
            }
            &::before {
                content: '';
                width: 240rpx;
                height: 0rpx;
                border-top: 1px solid #E4E7ED;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                margin-right: 30rpx;
            }
        }
        .content {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            .block{
                width: 33%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 180rpx;
                image {
                    width: 80rpx;
                    height: 80rpx;
                }
                text {
                    margin-top: 16rpx;
                    font-size: 28rpx;
                    color: #606266;
                }
            }
        }
        .cancel {
            width: 100%;
            height: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1rpx solid #E4E7ED;
        }
    }
</style>

分享组件可以作为公共组件被引用，下面是其他组件引用分享组件的方法。

 

 ref的作用是通过"refShare"可以调用分享组件里面定义的方法。

 

转载至 https://www.cnblogs.com/ljy-/articles/12442930.html