使用iScroll和photoswipe写手机浏览图片的插件的几点经验

首先，当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时，我第一想到了iScroll。它的左右滑动，上下滑动的效果在安卓手机上也能让用户有良好的体验，自己写也能方便控制。

我的需求是，插件要能左右滑动图片，当图片很长的时候要能上下滑动浏览全部图片，还要支持手势缩放，特别是较长或者较宽的图片。

1.

当最开始的时候，我做了一个本地缓存，把图片保存起来，为了加载滑动图片能更加流畅。

js代码：var json=new Array();

for(var i=0;i<4;i++){//4张图

json.push({id:i,url:"images/"+i+".jpg"});

}

localStorage.setItem("imgList",JSON.stringify(json));

使用iScroll的结构是这样的：

<div id="wrapper1">

<div id="scroller1">

<ul id="thelist">

</ul>

</div>

</div>

<!-- Mask layer -->

其中的li为动态加载生成，然后将li标签设置屏幕宽度，让li中的img标签宽度为100%，这样就可以全宽展示图片，实现左右一滑一张图。缩放的话，iScroll中有个属性，zoom:true就行。

这样一来，左右滑动、图片手势缩放没问题，可是当有的图片长度超过屏幕长度的时候，它就无法上下滑动显示被遮罩的部分了。

我试图对li用height:auto;也没效果。

后来查阅资料才知道，是iScroll为了能有更好的滑动效果，在它左右滑动的时候，禁用了上下滑动。

比如说iScroll.js中的这句：onBeforeScrollStart: function (e) { e.preventDefault(); }。

我曾想过在每张图片load之前判断图片的长度，如果图片长度大于屏幕长度，则对它限制height为屏幕高，否则就限制width为屏幕宽。

但是如果图片数量很大的话，这样的代价显然是不合理的。

再经过大量查找，我发现了这个：





http://oklai.name/
2013/03/%e8%a7%a3%e5%86%b3iscroll%e6%a8%aa%e5%90%91%e6%bb%9a%e5%8a%a8%e5%8c%ba%e5%9f%9f%e6%97%a0%e6%b3%95%

e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/

http://oklai.name/
2013/03/%e8%a7%a3%e5%86%b3iscroll%e6%a8%aa%e5%90%91%e6%bb%9a%e5%8a%a8%e5%8c%ba%e5%9f%9f%e6%97%a0%e6%b3%95%

e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/

经过修改，确实可以实现左右滑动图片的同时，若图片长度超出屏幕长度，则可以上下滑动浏览。但是用户体验十分不好，图片变成了上下左右等8个方向都能滑动了。

于是我放弃了iScroll。（在这里求大神有更好的解决方法~）

总结为：iScroll在横向滚动区域的上下滑动问题。

2.

然后，我开始使考虑用photoswipe插件。

代码：

<div id="MainContent">

<ul id="Gallery" class="gallery" style="display:none"> </ul>

</div>

使用photoswipe的过程很顺利，它支持左右滑动，若是图片是超长图片的话也能将图片高度缩至屏幕高度从而能看到整张图。

但是，它仅支持iOS下的缩放功能（也是设置allowUserZoom:true），对于android操作系统，文档给出的话是it is compatible with
Android（它能兼容android），但是其实是在android下不支持缩放功能的。

我在github上找到了一位大神的解决方案。

给出截图：



附上demo下载链接：https://github.com/agliottone/PhotoSwipe

总结为：photoswipe在安卓下的手势缩放问题。

然后我的图片插件问题得到圆满解决。iOS上能轻松滑动缩放，android上也能滑动缩放。happy！

（以上android仅指4.0或以上版本）

=====阿桃的CSDN博客：http://blog.csdn.net/taotao6039=====

【转载请注明出处：http://blog.csdn.net/taotao6039/article/details/10110651】