美文网首页微信小程序开发uni-app
uniapp自定义弹窗,可覆盖tabBar底部导航栏

uniapp自定义弹窗,可覆盖tabBar底部导航栏

作者: 吃肉肉不吃肉肉 | 来源:发表于2021-01-27 15:17 被阅读0次

    效果:


    image.png

    代码:

    <view class="showTotal" v-if="fillOut">
                <view class="show">
                    <image src="../../static/team/lALPDiQ3NdD0r2DNAhDNAmw_620_528.png" mode="widthFix" class="show-image"></image>
                    <view class="show-button" @click="toFeed">
                        立即填写
                    </view>
                </view>
                <view class="over"></view>
    </view>
    
    data(){
        return{fillOut:true}
    }
    
    <style lang="scss" scoped>
        .showTotal{
            .show{
                width: 620rpx;
                position: fixed;
                left: 0;
                right: 0;
                top:280rpx;
                margin: auto;
                z-index: 10000;
                &-image{
                    width: 620rpx;
                    position: relative;
                }
                &-button{
                    width: 400rpx;
                    line-height: 96rpx;
                    text-align: center;
                    color: #fff;
                    font-size: 32rpx;
                    border-radius: 56rpx;
                    background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
                    position: absolute;
                    bottom: -40rpx;
                    left: 110rpx;
                }
            }
            .over{
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.6;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;//这一步很重要
            }
            
            .button{
                width: 400rpx;
                height: 96rpx;
                background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
            }
        }
    </style>
    

    相关文章

      网友评论

        本文标题:uniapp自定义弹窗,可覆盖tabBar底部导航栏

        本文链接:https://www.haomeiwen.com/subject/vkdazktx.html