3.9 移动端使用iscroll出现的问题，多图片进行切换出现的问题，active选择器

<div id="wrapper">
<ul class="scroll">
<li></li>
.....
</ul>
</div>

　1、使用iscroll.js发现一些小规律，wrapper所设置的高度应该是li的高度的倍数，例如你页面需要显示三个li，那么wrapper的高度酒应该设置成为li*3,

scroll的高度是按照li的高度来计算的，例如li的数量有10个，那么scroll的高度酒应该设置成为li*10，wrapper为页面显示可以看到li的内容，限制个数，多余的部分隐藏，通过scroll进行滑动，高度建议使用px来计算，因为百分比计算起来比较困难

2、在移动端可以看到许多图片点击进行切换的样式，如果使用flag来进行标记，会出现冲突

说明：因为图片的命名是以on和off来命名，所以将on替换成off，就可以直接将图片替换掉，所以楼主采用flag来标记，进行图片切换

var flag=true;
$(".choose-fun li,.work-mode li,.bypass li").click(function(){
if(flag){
var src=$(this).find("div:first").css("background-image");
var imgurl=src.split('images/')[1].split('_')[0];
$(this).css("background-color","#e8e8e8");
$(this).find("div:first").css({"background":"url(images/"+imgurl+"_on@2x.png) center center no-repeat","background-size":"20px"});
}
else{
var src=$(this).find("div:first").css("background-image");
var imgurl=src.split('images/')[1].split('_')[0];
$(this).css("background-color","#FFF");
$(this).find("div:first").css({"background":"url(images/"+imgurl+"_off@2x.png) center center no-repeat","background-size":"20px"});
flag=true;
}

})

　　

但是在测试过承重发现，单单点击一张图片是有效的，但是点击后续的图片就会出现需要点击两下才可以替换，原因就是当点击第一张图片是，flag=false，则进行else语句，在其中图片替换语句中，是替换成off的图片，那么点击之后，的确是没有效果，执行完之后，flag=true，执行if语句，替换图片on，这才造成了需要点击两次的现象

结果方法：既然是以on和off来命名的图片，那么判断图片的名字就可以进行切换，修改后的代码如下

$(".choose-fun li,.work-mode li,.bypass li").click(function(){
var src=$(this).find("div:first").css("background-image");
var imgurl=src.split('images/')[1].split('_')[1].substring(0,2);
if(imgurl=="of"){
var src=$(this).find("div:first").css("background-image");
var imgurl=src.split('images/')[1].split('_')[0];
$(this).find("div:first").css({"background":"url(images/"+imgurl+"_on@2x.png) center center no-repeat","background-size":"20px"});
$(this).find("div:last").toggleClass("text-weight");
}
else{
var src=$(this).find("div:first").css("background-image");
var imgurl=src.split('images/')[1].split('_')[0];
$(this).find("div:first").css({"background":"url(images/"+imgurl+"_off@2x.png) center center no-repeat","background-size":"20px"});
$(this).find("div:last").toggleClass("text-weight");
}
})

　3、css：active选择器

在元素点击不松开的时候显示设置的样式，松开之后恢复原来的样式，这个可以优化用户对于手机端操作时的效果

4、针对于图片切换的方式，还可以先将样式写出来，后续进行切换class就可以，但是比较繁琐

5、在移动端页面布局的时候，图片不一样的位置可以将图片进行切割，或者是遇到图片在不同的设备上显示大小不一致，也可以采用此方法


切割后

切割前的图片在不同的设备上显示的效果不一致，有可能底下这部分完全看不到，这样的情况智能通过响应式来解决了，但是切割之后分成两部分，加上背景图片，就不会出现这样的情况，不需要响应式来解决