移动端共用提示语

最新推荐文章于 2024-09-20 10:25:36 发布

Q久夏青

最新推荐文章于 2024-09-20 10:25:36 发布

阅读量560

点赞数 1

分类专栏：前端攻城狮成长记录

本文链接：https://blog.csdn.net/Starjg101/article/details/93410627

版权

前端攻城狮成长记录专栏收录该内容

54 篇文章 0 订阅

订阅专栏

封装getCommonTips方法

参数传入提示文字，自适应提示框根据提示文字，自适应居中显示

定时器 2S后清除此提示相关代码

遇见难点：多次点击，多次触发函数，重复出现提示语，影响用户体验

解决办法：每次点击移除getCommonTips方法，点击无反应，2S后给onclick添加getCommonTips方法，再次传入提示文字

function getCommonTips(text) {
    // $(obj).attr("onclick","");
    this.str = '';
    this.str += `
            <div class="commonTips_box">
                <style>
                    .commonTips_box{
                        width: 100%;
                        display: -webkit-flex;
                        display: flex;
                        justify-content: center;
                        position: fixed;
                        left: 0;
                        bottom: 0;
                        z-index: 9999999;
                    }
                    .commonTips{
                        width:10rem;
                        /*background-color: #000;*/
                        display: -webkit-flex;
                        display: flex;
                        justify-content: center;
                        transition:all 0.5s;
                        -webkit-transition:all 0.5s;
                    }
                    .commonTips h1{
                        font-size: 0.4rem;
                        border-radius: 0.5rem;
                        background: rgba(0,0,0,.5);
                        display: -webkit-flex;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .commonTips h1 span{
                        display: block;
                        color: #fff;
                        padding: 0.17333333333333334rem 0.26666666666666666rem;
                        margin-top: -0.025rem;
                    }
                </style>
                <div class="commonTips">
                    <h1><span>${text}</span></h1>
                </div>
            </div>
        `;
    $("body").append(str);
    setTimeout(()=>{
        $(".commonTips").css("margin-bottom","10%")
    },10);
    setTimeout(()=>{
        $(".commonTips_box").remove();
        // $(obj).attr("onclick","getCommonTips(this,"+text+")");
    },2000);
}