链家H5项目经验总结

链家H5项目经验总结

 

在此次项目中，使用的是高度百分比。对于适配这一块确实少了很多。

1、如果是用高度百分比的话。则img需要写成这样的样式。

img{
    width:auto;
    height:100%;
    display: block;
}

如果需要居中的话，可以对外层的div设置一个类名class：比如是setwidth,然后通过js去获取第一张图片的宽度赋给这个外层的div.

setWidth:function(){
        $(".setWidth").each(function(index,element){
            var width=$(this).find("img").eq(0).width();
            $(this).css({"width":width+'px'});
        });
    },

不过要注意的是如果其他页面是隐藏的话，需要在这个页面显示之后再执行一遍setWidth。不然获取的宽度为0。

还有就是img标签和普通的div有点不同的就是，对于img标签的话，如果要居中，可以不用写宽度，直接定义宽度百分比，然后margin居中，就可以实现居中了。

如：

.img1{
    height:39%;
    margin:0 auto;
}

现在暂时只发现img有这个特性。

2、移动端的一点问题：

碰到的问题是这样的，在滑动屏幕的时候会闪一下下一页的背景。原因未知，解决办法：

给会闪的这个元素加入一行css代码：

-webkit-backface-visibility:hidden;

比如我出现的是section翻页的时候会闪一下下一页的背景。可以这样做。

section{
    display: none;
    -webkit-backface-visibility:hidden;
}

还有就是在最后一页的时候，弹出框里面的四个li向后面翻页的时候会抖动一下。

也是这样处理的。

.popcontent li{
    width: 25%;
    height:100%;
    float:left;
    position:relative;
    -webkit-backface-visibility:hidden;
}    

问题是这样解决了。但是为何如此呢？？？

W3C是这样定义-webkit-backface-visibility:hidden;的

Problematic in WebKit because backface-visibility not hidden

• -webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）

3、js：

在用zepto的animate函数的时候，因为用了回调，导致回调函数半天出不来，执行的非常慢。原因未知。但是如果是这样的话，可以不使用回调函数。

原来执行回调很慢的js代码：

popfn:{
        close:$('.closed'),
        open:$('.p6_lj'),
        length:$('.popcontent li').length,
        width:$('.popcontent li').width(),
        popli:$('.popcontent li'),
        page_current:$('.page_current'),
        dotli:$('.dot li'),
        init:function(){
            var close = s.popfn.close;
            var open = s.popfn.open;
            close.on('tap',s.popfn.closed);
            open.on('tap',s.popfn.opened);
            s.popfn.popLRbind();
        },
        closed:function() {
            $(this).parents('.pop').hide();
            s.sec.on({
            'swipeLeft':s.swipeLeft,
            'swipeRight':s.swipeRight
            });
        },
        opened:function() {
            s.sec.off({
            'swipeLeft':s.swipeLeft,
            'swipeRight':s.swipeRight
            });
            $(this).parents('.wrap').next().show();
        },
        popSwipeLeft:function(){
            var current = $('.page_current').index();
            var length = s.popfn.length;
            var page_current = s.popfn.page_current;
            var popli = s.popfn.popli;
            var dotli = s.popfn.dotli;
            if(current<length-1&&s.flag){
                s.flag=false;
                var translate = -(current+1)*25;
                $('.popcontent ul').animate({'-webkit-transform':'translateX('+translate+'%)'},800,'ease-in-out',function(){
                    console.log(1);
                popli.eq(current).removeClass('page_current').next().addClass('page_current');
                dotli.eq(current).removeClass('active').next().addClass('active');
                s.flag=true;
            });
            }else{
                return;
            }
        },
        popSwipeRight:function(){
            var current = $('.page_current').index();
            var length = s.popfn.length;
            var popli = s.popfn.popli;
            var dotli = s.popfn.dotli;
            if(current>0&&s.flag){
                s.flag=false;
                var translate = -(current-1)*25;
                $('.popcontent ul').animate({'-webkit-transform':'translateX(' + translate + '%)'},800,'ease-in-out',function(){
                popli.eq(current).removeClass('page_current').prev().addClass('page_current');
                dotli.eq(current).removeClass('active').prev().addClass('active');
                s.flag=true;
            });
            }else{
                return;
            }
        },
        popLRbind:function(){
            s.popfn.popli.on({
                'swipeLeft':s.popfn.popSwipeLeft,
                'swipeRight':s.popfn.popSwipeRight
            });
        }
    }

后面改了之后的就正常了。

popfn:{
        close:$('.closed'),
        open:$('.p6_lj'),
        length:$('.popcontent li').length,
        popli:$('.popcontent li'),
        page_current:$('.page_current'),
        dotli:$('.dot li'),
        init:function(){
            var close = s.popfn.close;
            var open = s.popfn.open;
            close.on('tap',s.popfn.closed);
            open.on('tap',s.popfn.opened);
            s.popfn.popLRbind();
        },
        closed:function() {
            $(this).parents('.pop').css('display','none');
            s.sec.on('swipeRight',s.swipeRight);
        },
        opened:function() {
            s.sec.off('swipeRight',s.swipeRight);
            $(this).parents('.wrap').next().css('display','block');
        },
        popSwipeLeft:function(){
            var current = $('.page_current').index();
            var length = s.popfn.length;
            var page_current = s.popfn.page_current;
            var popli = s.popfn.popli;
            var dotli = s.popfn.dotli;
            if(current<length-1&&s.flag){
                s.flag=false;
                var translate = -(current+1)*25;
                $('.popcontent ul').animate({'-webkit-transform':'translate3d('+translate+'%,0,0)'},800);
                popli.eq(current).removeClass('page_current').next().addClass('page_current');
                dotli.eq(current).removeClass('active').next().addClass('active');
                s.flag=true;
            }
        },
        popSwipeRight:function(){
            var current = $('.page_current').index();
            var length = s.popfn.length;
            var popli = s.popfn.popli;
            var dotli = s.popfn.dotli;
            if(current>0&&s.flag){
                s.flag=false;
                var translate = -(current-1)*25;
                $('.popcontent ul').animate({'-webkit-transform':'translate3d(' + translate + '%,0,0)'},800);
                popli.eq(current).removeClass('page_current').prev().addClass('page_current');
                dotli.eq(current).removeClass('active').prev().addClass('active');
                s.flag=true;
            }
        },
        popLRbind:function(){
            s.popfn.popli.on({
                'swipeLeft':s.popfn.popSwipeLeft,
                'swipeRight':s.popfn.popSwipeRight
            });
        }
    }