项目总结1

Posted 2020-08-10 素雨雫晴

1、移动端1px问题

    
<style>
        .border{
            position: relative;
            width: 80%;
            height: 20px;
            background: yellow;
        }
        .border_btm:after{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            content: ‘ ‘;
            border: 1px solid red;
            transform: scaleY(.5);
        }
    </style>
<div class="border border_btm">
        1像素
</div>

2.水平垂直居中

<style>
        .oneToast{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            －webkit－transform:translate(50%,50%);
            white-space: nowrap; /*内容过多时不折行*/
            min-width: 8rem;
            padding: .9rem 1.6rem;
            text-align: center;
            font-size: 1.4rem;
            color: #fff;
            background: rgba(0,0,0, .5);
            border-radius: 40px;
        }


    </style>    

<div class="oneToast">
        您的购物车已满99件，建议先去结算或清理
</div>    

3、点赞加1，再次点击取消（这里前端只是实现交互效果，需要后台数据）

<span class="z_dz">
    <i class="icon-vdz"></i>
    <b class="zan">56</b>
</span>

var zDz = $(‘.z_dz‘);
    zDz.tap(function(){
        $(this).toggleClass(‘z_dzColor‘);
        var zanNum =parseInt($(‘.zan‘,this).text());

    if(zDz.hasClass(‘z_dzColor‘)){
            zanNum +=1;
            $(‘.zan‘,this).text(zanNum);
            
        }else {
            zanNum -=1;
            $(‘.zan‘,this).text(zanNum);
        }
    });

 $(‘.zan‘,this).text(zanNum)

ps:$(‘.zan‘,this) 等同于 $(this).find(‘.zan‘)