链家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
});
}
}
